Comment charger efficacement les polices Google dans votre projet Nuxt ?

Comment charger efficacement les polices Google dans Nuxt

Lorsque vous travaillez avec NuxtJS, il est crucial de prendre en compte les meilleures pratiques de chargement des polices Google pour garantir performances optimales. S'appuyer sur un CDN n'est pas l'approche recommandée, comme le souligne la liste de contrôle des performances 2021 de Vitaly Friedman. Au lieu de cela, adopter l'auto-hébergement ou le proxy via l'origine de la page est la méthode préférée.

Une option hautement recommandée consiste à utiliser le @ Module nuxtjs/google-fonts, qui offre une solution pratique pour intégrer les polices Google dans vos projets Nuxt. Voici comment vous pouvez le configurer dans votre fichier nuxt.config.js :

<code class="js">export default {
  buildModules: [
    [
      '@nuxtjs/google-fonts',
      {
        families: {
          Mali: {
            wght: [400, 600, 700],
          },
        },
        subsets: ['latin'],
        display: 'swap',
        prefetch: false,
        preconnect: false,
        preload: false,
        download: true,
        base64: false,
      },
    ],
  ],
}</code>

Cette configuration gérera automatiquement le chargement de la famille de polices Mali avec différentes épaisseurs, en garantissant que l'épaisseur appropriée est appliquée à chaque élément. dans vos composants Vue.

Veuillez noter que si vous rencontrez des problèmes avec des poids spécifiques non téléchargés, vous pouvez soit définir la propriété d'écrasement sur true dans la configuration de votre module, soit mettre à jour la version de votre package vers la v3.0.0-1.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!