next google fonts

️

Este proyecto ha sido desaprobado

¿A partir de Next.js 10.2, Google Fonts se optimizan automáticamente?

Gracias por todo tu amor y apoyo para este proyecto,
José

---

Next-Google-Fonts

Un pequeño ayudante next/head para cargar Foogle Fonts Rápido y asincrónicamente ⏩

Usando Next.js 10? Vea "¿Cómo se compara esto con la optimización de fuentes Next.js?" antes de continuar.

Tabla de contenido

1. Configuración
2. Preguntas frecuentes

Configuración

En este ejemplo, vamos a agregar Inter (específicamente pesos 400 y 700 ) a una aplicación Next.js.

Vea Joebell.co.uk para un ejemplo de trabajo.

1. Agregue el paquete a su proyecto Next.js:

   npm i next-google-fonts

2. Crea un componente Head personalizado.

   Es importante reconocer que next-google-fonts es un pequeño componente next/head y no debe anidadarse dentro de next/head . Para resolver esto, envuelva ambos componentes con un Fragment .

    // components/head.js
   import * as React from "react" ;
   import NextHead from "next/head" ;
   import { GoogleFonts } from "next-google-fonts" ;
   
   export const Head = ( { children , title } ) => (
     < React . Fragment >
       < GoogleFonts href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;700 & display = swap " />
       < NextHead >
         < meta charSet = "UTF-8" />
         < meta
           name = "viewport"
           content = "width=device-width, initial-scale=1.0"
         />
         < meta httpEquiv = "x-ua-compatible" content = "ie=edge" />
   
         < title > { title } </ title >
   
         { children }
       </ NextHead >
     </ React . Fragment >
   ) ;

3. Agregue las fuentes de Google solicitadas a sus estilos con un alternativo sensible. Realmente no importa si está usando CSS o SASS o CSS-in-JS:

    body {
     font-family : "Inter" , sans-serif;
   }

4. ¡Ejecute su aplicación Next.js para ver los resultados en acción!

   Debería esperar ver primero la fuente alternativa, seguido de un cambio a la fuente de Google sin advertencias de CSS de bloqueo de renderizado. Sus fuentes continuarán mostrando hasta que su aplicación esté rehidratada.

   Si JS está deshabilitado, solo se mostrará la fuente alternativa.

Preguntas frecuentes

• ¿Cómo se compara esto con la optimización de fuentes Next.js?
• ¿Por qué?

¿Cómo se compara esto con la optimización de fuentes Next.js?

Next.js 10 Introducido Optimización automática de fuentes de Google, puede tomar una decisión sobre qué solución usar en función de los siguientes criterios:

• "Mis fuentes no son prioritarias y se pueden cargar de forma asincrónica ": use next-google-fonts .
• "Mis fuentes son prioritarias y no deben cargarse de forma asincrónica " - Use la optimización de fuentes Next.js

Para una lectura adicional, vea la discusión de Next.JS.

¿Por qué?

next-google-fonts tiene como objetivo hacer que el proceso de usar las fuentes de Google en Next.js sea más consistente, más rápido e indoloro: preconta los activos de fuentes, precargas y carga asincrónicamente el archivo CSS.

En la iteración actual de next/head , no podemos utilizar el método familiar de "hack de medios" de carga asincrónica de Google Font:

 <!-- Plain HTML -->
< link
  rel =" stylesheet "
  href =" https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap "
  media =" print "
  onload =" this.media='all' "
/>

Si desea rastrear este problema en Next.js, puede seguirlo aquí: Next.js#12984.