La mejor manera de cargar fuentes de Google de manera eficiente en Nuxt

Cuando se trabaja con múltiples componentes que requieren diferentes pesos de fuente de la misma fuente de Google, es Es importante evitar la práctica redundante de importar múltiples enlaces en Layout.vue.

Para abordar este problema y optimizar la carga de fuentes en proyectos NuxtJS, se recomienda utilizar el módulo @nuxtjs/google-fonts. Este módulo ofrece un enfoque eficiente y centralizado para administrar las importaciones de fuentes de Google.

Uso del módulo @nuxtjs/google-fonts

1. Instalar el módulo:

npm install @nuxtjs/google-fonts

2. Agregue el módulo a su archivo 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. Importe las fuentes en el estilo de su componente usando la regla @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');
}

Notas adicionales:

• Si no se descargan pesos de fuente específicos, establezca sobrescritura: verdadero en la configuración del módulo o actualice el paquete a v3.0.0 -1.
• El autohospedaje de Google Fonts generalmente es preferible al uso de una CDN para optimizar el rendimiento. Considere la posibilidad de utilizar google-webfonts-helper para el autohospedaje.