Nuxt에서 Google 글꼴을 효율적으로 로드하는 가장 좋은 방법

동일한 Google 글꼴에서 서로 다른 글꼴 가중치가 필요한 여러 구성요소로 작업할 때, Layout.vue에서 여러 링크를 가져오는 중복된 관행을 피하는 것이 중요합니다.

이 문제를 해결하고 NuxtJS 프로젝트에서 글꼴 로딩을 최적화하려면 @nuxtjs/google-fonts 모듈을 활용하는 것이 좋습니다. 이 모듈은 Google 글꼴 가져오기를 관리하기 위한 효율적이고 중앙화된 접근 방식을 제공합니다.

@nuxtjs/google-fonts 모듈 사용

1. 모듈 설치:

npm install @nuxtjs/google-fonts

2. nuxt.config.js 파일에 모듈을 추가하세요.

export default {
  buildModules: [
    [
      '@nuxtjs/google-fonts',
      {
        families: {
          'Saira Semi Condensed': {
            wght: [600, 800],
          },
        },
        display: 'swap', // Load fonts as soon as possible
        prefetch: false, // Don't prefetch fonts
        preconnect: false, // Don't preconnect to font server
        preload: false, // Don't preload fonts
        download: true, // Download fonts for offline use
        base64: false, // Don't base64 encode fonts
      },
    ],
  ],
}

3. @font-face 규칙을 사용하여 구성 요소 스타일의 글꼴을 가져옵니다.

@font-face {
  font-family: 'Saira Semi Condensed', sans-serif;
  font-weight: 600;
  font-style: normal;
  src: local('Saira Semi Condensed'), local('SairaSemiCondensed-Wght600'),
  url("https://fonts.gstatic.com/s/sairasemicondensed/v15/E6qS90ZBdhyxr0K917oteYGc.woff2") format('woff2');
}

추가 참고 사항:

• 특정 글꼴 가중치가 다운로드되지 않는 경우 모듈 구성에서 덮어쓰기: true를 설정하거나 패키지를 v3.0.0으로 업데이트하세요. -1.
• 성능 최적화를 위해 CDN을 사용하는 것보다 자체 호스팅 Google Fonts가 일반적으로 더 좋습니다. 자체 호스팅을 위해 google-webfonts-helper 사용을 고려해 보세요.