Fontsource로 폰트 적용하기

Fontsource는 구글 폰트와 같은 오픈소스 폰트를 NPM 패키지로 제공해주는 라이브러리이다.
Fontsource를 사용하면 오픈 소스 폰트를 프로젝트에 쉽게 불러올 수 있고 신속하게 사용할 수 있게 해준다.
성능과 개발 편의성적인 면에서 많은 장점이 있어서 사용할 만한 가치가 있는 것 같다 : )

https://github.com/fontsource/fontsource

GitHub - fontsource/fontsource: Self-host Open Source fonts in neatly bundled NPM packages.



FontSource의 장단점은?

뤼튼에게 Fontsource의 장단점에 대해 알려달라고 했다. 

- Fontsource의 장점 
퍼포먼스: Fontsource를 사용하면, 웹 사이트 로딩 시 외부 리소스를 요청할 필요 없이 번들에 포함되어 배포되기 때문에, 성능과 로딩 속도에 도움이 됩니다.
커스터마이징: 하나의 패키지에 다양한 스타일과 폰트 가중치 등을 포함할 수 있습니다. 또한, 필요한 스타일만 import 할 수 있어 번들 사이즈를 줄일 수 있습니다.
오프라인 개발: Fontsource 패키지는 로컬에 저장되기 때문에, 인터넷 연결이 없는 상황에서도 폰트가 깨지지 않고 원활히 작업할 수 있습니다.
- Fontsource의 단점:
라이브러리 관리: Fontsource를 사용하면, 폰트를 npm 상에서 다운로드하고 프로젝트의 종속성으로 추가해야합니다. 이는 일부 개발자에게 추가적인 오버헤드를 초래할 수 있습니다.
갱신 지연: Fontsource 패키지는 수동으로 갱신해야 합니다. 즉, 구글 폰트에 변경이 생겼을 때 바로 반영되지 않을 수 있습니다. 이를 위해 폰트 라이브러리를 최신 상태로 유지해야 합니다.

 

이러한 답변을 받았다.
기존에는 폰트를 직접 다운로드하고 웹 프로젝트에 데려와서 추가해주어야 했는데 이러한 번거로움이 사라져서 너무 편리한 것 같다! 

Fontsource 사용법은?

1. 필요한 폰트를 설치하자

npm install @fontsource/roboto

2. 폰트를 프로젝트의 최상위 파일 또는 글로벌 스타일이 정의된 파일에서 import 하자. 

import "@fontsource/roboto";

3. 폰트를 적용하자.

import styled from "styled-components";

const Text = styled.p`
  font-family: "Roboto", sans-serif;
`;

export default Text;