Nuxt.js に Google フォントを効率的にロードするにはどうすればよいですか?

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');
}

追加メモ:

• 特定のフォント ウェイトがダウンロードされない場合は、モジュールで overwriting: true を設定します。構成するか、パッケージを v3.0.0-1 に更新します。
• パフォーマンスの最適化には、CDN を使用するよりもセルフホスティング Google Fonts を使用することをお勧めします。セルフホスティングには google-webfonts-helper の使用を検討してください。

以上がNuxt.js に Google フォントを効率的にロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。