Лучший способ эффективной загрузки шрифтов Google в Nuxt

При работе с несколькими компонентами, которым требуется разная толщина шрифта из одного и того же шрифта 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');
}

Дополнительные примечания:

• Если шрифты определенной толщины не загружаются, установите overwrite: true в конфигурации модуля или обновите пакет до версии 3.0.0. -1.
• Самостоятельное размещение Google Fonts обычно предпочтительнее использования CDN для оптимизации производительности. Рассмотрите возможность использования google-webfonts-helper для самостоятельного размещения.