Meilleur moyen de charger efficacement des polices Google dans Nuxt

Lorsque vous travaillez avec plusieurs composants nécessitant des épaisseurs de police différentes à partir de la même police Google, il est Il est important d'éviter la pratique redondante consistant à importer plusieurs liens dans Layout.vue.

Pour résoudre ce problème et optimiser le chargement des polices dans les projets NuxtJS, il est recommandé d'utiliser le module @nuxtjs/google-fonts. Ce module offre une approche efficace et centralisée pour gérer les importations de polices Google.

Utilisation du module @nuxtjs/google-fonts

1. Installez le module :

npm install @nuxtjs/google-fonts

2. Ajoutez le module à votre fichier 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. Importez les polices dans le style de votre composant à l'aide de la règle @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');
}

Remarques supplémentaires :

• Si des épaisseurs de police spécifiques ne sont pas téléchargées, définissez overwriting: true dans la configuration du module ou mettez à jour le package vers la version 3.0.0. -1.
• L'auto-hébergement des polices Google est généralement préférable à l'utilisation d'un CDN pour l'optimisation des performances. Pensez à utiliser google-webfonts-helper pour l'auto-hébergement.