자체 호스팅 글꼴
웹 응용 프로그램에 사용된 글꼴을 번들로 묶고 싶다면 Fontsource가 한 번 살펴보고 싶은 라이브러리입니다(페이지 끝에 있는 부록의 링크도 참조). 사용하려는 글꼴을 설치할 수 있습니다. 즉, 글꼴을 직접 호스팅하고 로드하는 데 CDN이 필요하지 않습니다.
각 글꼴 설치
사용하려는 글꼴을 설치하려면 각 변형에 대해 install-command를 실행하기만 하면 됩니다. 다음 코드 스니펫은 이 PWA의 글꼴이 설치되는 방법을 보여줍니다.
npm install @fontsource/work-sans
내 애플리케이션의 진입점에서 설치된 패키지를 가져와서 사용해야 합니다. 이를 통해 오버헤드를 추가하지 않고도 필요한 것을 정확하게 정의할 수 있습니다. 글꼴 크기가 상당히 클 수 있으므로 바이트를 절약할 수 있는 좋은 기회입니다.
import "@fontsource/work-sans/400.css";
import "@fontsource/work-sans/900-italic.css";
마지막으로 CSS에서 글꼴 모음을 설정해야 합니다. 사용 중인 라이브러리(예: Tailwind.css)에 따라 이 코드가 약간 다르게 보일 수 있습니다.
body {
font-family: "Work Sans", sans-serif;
}
가변 글꼴
Fontsource는 가변 글꼴을 설치하는 옵션도 제공하므로 글꼴 로드와 관련하여 최신 도구에 액세스할 수 있습니다. 모든 글꼴을 가변 변형으로 사용할 수 있는 것은 아닙니다.
