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

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 seu site se não for otimizado corretamente. O @próximo/fonte pacote é uma solução para este problema.

O pacote @next/font oferece 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.

Instalando o pacote

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

npm install @next/font

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

fio adicionar @próximo/fonte

Usando o @next/font para otimizar as fontes do Google

O @próximo/fonte pacote otimiza o uso de fontes do Google. O @próximo/fonte hospeda 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/google no _app.js arquivo no Páginas diretório:

importar { Robô } de'@next/font/google'
const robô = Robô({ subconjuntos: ['latim'] })
exportarpadrãofunçãoMeuAplicativo({ Componente, pageProps }) {
retornar (

 )
}

No bloco de código acima, você criou uma fonte variável usando o Roboto função de fonte. O subconjunto 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:

const robo = Roboto( 
 {
 subconjuntos: ['latim'],
 peso: '400',
 estilo: 'itálico'
 }
)

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

Por exemplo:

const robo = Roboto( 
 {
 subconjuntos: ['latim'],
 peso: ['400', '500', '700'],
 estilo: ['itálico', 'normal']
 }
)

Em seguida, você envolverá seus componentes em um principal tag e passe a fonte como uma classe para o principal marcação:

importar { Robô } de'@next/font/google'
const robo = Roboto( 
 {
 subconjuntos: ['latim'],
 peso: ['400', '500', '600'],
 estilo: ['itálico', 'normal']
 }
)
exportarpadrãofunçãoMeuAplicativo({ Componente, pageProps }) {
retornar (


 </main>
 )
}

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:

importar { Robô } de'@next/font/google'
const robo = Roboto( 
 {
 subconjuntos: ['latim'],
 peso: ['400', '500', '600'],
 estilo: ['itálico', 'normal']
 }
)
exportarpadrãofunçãoLar() {
retornar (


Olá!!!</p>
 </div>
 )
}

Usando @next/font para otimizar fontes locais

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/fonte pacote é bastante semelhante à otimização de fontes do Google, com diferenças sutis.

Para otimizar as fontes locais, utilize o fonte local função fornecida pelo @próximo/fonte pacote. Você importa o fonte local função de @próximo/fonte/local e então defina sua fonte variável antes usando a fonte em seu aplicativo Next.js.

Igual a:

importar fonte local de'@next/fonte/local'
const minhaFonte = fontelocal({ origem: './minha-fonte.woff2' })
exportarpadrãofunçãoMeuAplicativo({ Componente, pageProps }) {
retornar (


 </main>
 )
}

Você define a fonte variável minhaFonte usando o fonte local função. O fonte 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 no WOFF2 formatar "./minha-fonte.woff2".

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

Por exemplo:

const minhaFonte = fontelocal( 
 {
 origem: [
 {
 caminho: './Roboto-Regular.woff2',
 peso: '400',
 estilo: 'normal',
 },
 {
 caminho: './Roboto-Italic.woff2',
 peso: '400',
 estilo: 'itálico',
 },
 {
 caminho: './Roboto-Bold.woff2',
 peso: '700',
 estilo: 'normal',
 },
 {
 caminho: './Roboto-BoldItalic.woff2',
 peso: '700',
 estilo: 'itálico',
 },
 ]
 }
)

Usando @next/font com Tailwind CSS

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:

importar { Inter } de'@next/font/google'
const inter = Inter({
 subconjuntos: ['latim'],
 variável: '--font-inter',
})
exportarpadrãofunçãoMeuAplicativo({ Componente, pageProps }) {
retornar (
`${inter.variável} fonte-sans`}>

 </main>
 )
}

No bloco de código acima, você criou a fonte, inter, e defina a variável como --font-inter. O nome da classe do elemento principal é então definido como a variável de fonte e fonte-sans. O inter.variável classe irá aplicar o inter fonte para a página, e o fonte-sans class aplicará a fonte sem serifa padrão.

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

/** @tipo {import('tailwindcss').Config}*/
módulo.exportações = {
 contente: ["./index.html",
"./src/**/*.{js, ts, jsx, tsx}",],
 tema: {
 ampliar: {
 família de fontes: {
 sem: ['var(--font-inter)'],
 },
 },
 },
 plug-ins: [],
}

Agora você pode aplicar a fonte em seu aplicativo usando o fonte-sans aula.

Otimização de fonte com @next/font

O pacote @next/font é uma maneira simples e eficaz de otimizar o carregamento de fontes em Next.js. Este pacote garante que suas fontes personalizadas sejam carregadas com eficiência, melhorando o desempenho do seu site e a experiência do usuário. Este artigo fornece informações sobre como configurar o pacote @next/font e utilizá-lo em seu aplicativo Next.js. Você pode melhorar ainda mais o desempenho do seu site otimizando as imagens.