Como usar @next/font para otimizar fontes em Next.js

As fontes estão diminuindo o desempenho do seu site? Otimize o tempo de carregamento da fonte do seu aplicativo usando este pacote.

Talvez você queira usar fontes personalizadas para tornar seu aplicativo Next.js visualmente mais atraente. O uso de fontes personalizadas pode melhorar significativamente a aparência do seu site, mas também pode diminuir o desempenho do site se não for otimizado adequadamente. O@próximo/fontepacote é uma solução para este problema.

O pacote @next/font fornece uma maneira simples e eficiente de otimizar o carregamento de fontes em Next.js, melhorando o tempo de carregamento da página e o desempenho geral. Este artigo fornece informações sobre como usar @next/font em seu projeto Next.js.

Você pode instalar o@próximo/fontepackage executando o seguinte comando em seu terminal:

Se estiver usando yarn, você pode instalar o pacote executando este comando:

O@próximo/fonte pacote otimiza o uso de fontes do Google. O@próximo/fontehospeda automaticamente as fontes do Google no servidor Next.js para que nenhuma solicitação seja enviada ao Google para obter as fontes.

Para usar uma fonte do Google em seu aplicativo, você importará a fonte como uma função de@próximo/fonte/googleno_app.jsarquivo noPáginasdiretório:

No bloco de código acima, você criou uma fonte variável usando oRobô função de fonte. Osubconjunto a propriedade subconjuntos da fonte apenas para os caracteres latinos; se você usar outro idioma, poderá subdefinir a fonte para esse idioma.

Você também pode especificar o peso da fonte junto com o estilo da fonte ao definir a fonte:

Você especifica vários pesos e estilos de fonte usando matrizes.

Por exemplo:

Em seguida, você envolverá seus componentes em umprincipaltag e passe a fonte como uma classe para oprincipalmarcação:

A renderização de seu aplicativo com o bloco de código acima aplicará a fonte a todo o aplicativo. Como alternativa, você pode aplicar a fonte a uma única página. Para fazer isso, você adiciona a fonte a uma página específica.

Igual a:

O@próximo/fonte pacote também otimiza o uso de fontes locais. A técnica de otimização de fontes locais através do@próximo/fontepacote é bastante semelhante à otimização de fontes do Google, com diferenças sutis.

Para otimizar as fontes locais, utilize ofonte localfunção fornecida pelo@próximo/fonte pacote. Você importa ofonte localfunção de@próximo/fonte/locale, em seguida, defina sua fonte variável antes de usar a fonte em seu aplicativo Next.js.

Igual a:

Você define a fonte variávelminhaFonteusando ofonte local função. Ofonte local função recebe um objeto como seu argumento. O objeto tem uma única propriedade,origem, que é definido como o caminho de arquivo do arquivo de fonte noWOFF2formatar"./minha-fonte.woff2".

Você pode usar vários arquivos de fonte para uma única família de fontes. Para fazer isso, você define oorigempropriedade a uma matriz contendo objetos das diferentes fontes e suas propriedades.

Por exemplo:

Para usar o@próximo/fonte pacote com Tailwind CSS, você precisa usar variáveis ​​CSS. Para fazer isso, você definirá sua fonte usando o Google ou fontes locais e, em seguida, carregará sua fonte com a opção de variável para especificar o nome da variável CSS.

Por exemplo:

No bloco de código acima, você criou a fonte,inter,e defina a variável como--font-inter . Onome da classedo elemento principal é então definido como a variável de fonte efazer sem . Ointer.variávelclasse irá aplicar ointerfonte para a página, e ofazer semclass aplicará a fonte sem serifa padrão.

Em seguida, adicione a variável CSS ao arquivo de configuração tailwind