next google fonts

️

Este projeto foi preterido

A partir do próximo.js 10.2, as fontes do Google são otimizadas automaticamente?

Obrigado por todo o seu amor e apoio por este projeto,
Joe

---

PRÓXIMO GOOGLE-FONTS

Um pequeno ajudante next/head para carregar fontes do Google rápido e assíncrono ⏩

Usando o próximo.js 10? Veja "Como isso se compara a Next.js Font Otimization?" antes de continuar.

Índice

1. Configurar
2. Perguntas frequentes

Configurar

Neste exemplo, adicionaremos Inter (especificamente pesos 400 e 700 ) a um aplicativo Next.js.

Veja Joebell.co.uk para um exemplo de trabalho.

1. Adicione o pacote ao seu projeto Next.js:

   npm i next-google-fonts

2. Crie um componente Head personalizado.

   É importante reconhecer que next-google-fonts é um pequeno componente next/head e não deve ser aninhado dentro next/head . Para resolver isso, envolva os dois componentes com um 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. Adicione a fonte do Google (s/s solicitada aos seus estilos com um retrocesso sensata. Realmente não importa se você está usando CSS ou SASS ou CSS-In-JS:

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

4. Execute seu aplicativo Next.js para ver os resultados em ação!

   Você deve esperar ver a fonte de fallback primeiro, seguida de uma mudança para as fontes do Google, sem nenhum aviso de CSS de bloqueio de renderização. Suas fontes continuarão sendo exibidas até que seu aplicativo seja re-hidratado.

   Se o JS estiver desativado, apenas a fonte de fallback será exibida.

Perguntas frequentes

• Como isso se compara a Next.js Font Otimization?
• Por que?

Como isso se compara a Next.js Font Otimization?

Next.JS 10 Introduziu otimização automática de fontes do Google, você pode tomar uma decisão sobre qual solução usar com base nos seguintes critérios:

• "Minhas fontes não são prioritárias e podem ser carregadas de forma assíncrona "-use next-google-fonts .
• "Minhas fontes são prioritárias e não devem ser carregadas de forma assíncrona " - use otimização da fonte Next.js

Para uma leitura adicional, consulte a discussão em questão do próximo.js.

Por que?

next-google-fonts visa tornar o processo de usar fontes do Google em Next.js mais consistente, mais rápida e indolor: ele se reneca para fontes de ativos, pré-carregamentos e carrega assíncrono o arquivo CSS.

Na iteração atual do next/head , não podemos usar o familiar método "Media Hack" do carregamento assíncrono do 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' "
/>

Se você quiser rastrear esse problema no Next.js, poderá segui -lo aqui: Next.JS#12984.