Beste Möglichkeit, Google-Schriftarten effizient in Nuxt zu laden

Wenn Sie mit mehreren Komponenten arbeiten, die unterschiedliche Schriftstärken derselben Google-Schriftart erfordern, ist dies der Fall Es ist wichtig, die redundante Praxis des Importierens mehrerer Links in Layout.vue zu vermeiden.

Um dieses Problem zu beheben und das Laden von Schriftarten in NuxtJS-Projekten zu optimieren, wird empfohlen, das Modul @nuxtjs/google-fonts zu verwenden. Dieses Modul bietet einen effizienten und zentralisierten Ansatz zur Verwaltung von Google-Schriftartenimporten.

Verwenden des @nuxtjs/google-fonts-Moduls

1. Installieren Sie das Modul:

npm install @nuxtjs/google-fonts

2. Fügen Sie das Modul zu Ihrer nuxt.config.js-Datei hinzu:

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. Importieren Sie die Schriftarten in Ihrem Komponentenstil mithilfe der @font-face-Regel:

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

Zusätzliche Hinweise:

• Wenn bestimmte Schriftstärken nicht heruntergeladen werden, legen Sie „overwriting: true“ in der Modulkonfiguration fest oder aktualisieren Sie das Paket auf v3.0.0 -1.
• Selbsthosting von Google Fonts ist zur Leistungsoptimierung im Allgemeinen der Verwendung eines CDN vorzuziehen. Erwägen Sie die Verwendung von google-webfonts-helper für das Selbsthosting.