속도 팁: Gatsby에서 Typefaces.js를 사용하여 로컬에서 글꼴 호스팅

내 새로운Gatsby 기반 웹사이트를 시작한 이후로 로드 시간을 늦추는 단 하나의 요소가 있음을 발견했습니다. 바로 Google 글꼴을 통해 글꼴을 가져오는 것입니다! 글꼴 파일은 일반적으로 비교적 작지만 이러한 가져오기로 인해 Google 서버에 추가로 이동하게 되며 결과적으로 약간의 로드 차단 지연이 발생합니다. (특히 느린 연결에서.)

Typefaces.js 소개

자체 호스팅 글꼴은 과거에 항상 약간 엉망이었습니다. 그래서 대부분의 사람들(저를 포함하여)은 Google 글꼴에서 바로 가져오기에 의존했습니다... 결국 그들이 제안한 것입니다!

고맙게도 Kyle Mathews의 Typefaces.js 패키지를 사용할 수 있습니다. (예, Gatsby의 제작자 중 하나입니다.) 사이트 또는 앱의 빌드 프로세스가 CSS 및 글꼴용 로더와 함께 Webpack을 사용한다고 가정하면 사용하기가 엄청나게 쉽습니다. 제 경우에는 개츠비에서 써보고 싶었는데...

Gatsby에서 Typefaces.js 사용하기

이것이 당신이 해야 할 전부입니다:


1. 필요한 글꼴에 대해 NPM에서 서체 파일을 찾습니다.

제 경우에는 Emily's Candy 및 Merriweather 이었습니다. 참고: Kyle이 프로그래밍 방식으로 추가했기 때문에 Google의 모든 글꼴을 NPM에서 사용할 수 있습니다. (Font Squirrel의 글꼴도 작업 중입니다!)


2. 원사를 통해 위의 파일을 설치합니다.

   yarn add typeface-merriweather typeface-emilys-candy

3. 해당 글꼴의 이전 가져오기를 제거합니다.

(내 SCSS에서 @import를 통해 이전에 가져왔습니다)


4. gatsby-browser.js에 다음을 추가합니다.

   require('typeface-emilys-candy');
   require('typeface-merriweather');

또는 최상위/레이아웃 구성 요소에서 가져오기:

   import 'typeface-emilys-candy';
   import 'typeface-merriweather';

5. 새로 다시 빌드하면 완료됩니다!

전체 프로세스는 총 2분 정도 소요되었으며 프로세스에서 모바일 로드 시간을 ~500ms 추가로 단축했습니다. Gatsby 사이트에서 아직 이 작업을 수행하지 않았다면 적극 권장합니다!