As fontes da Web são uma ótima maneira de adicionar fontes personalizadas ao seu site. Essas fontes podem não estar disponíveis no sistema de um usuário, portanto, você precisa incluí-las em seu projeto, hospedando-as ou referenciando-as por meio de um CDN.
Saiba como incluir fontes da Web em um site Next.js usando esses dois métodos.
Usando fontes auto-hospedadas em Next.js
Para adicionar fontes auto-hospedadas em Next.js, você precisa use a regra CSS @font-face. Esta regra permite adicionar fontes personalizadas a uma página da web.
Antes de usar o font-face, você deve baixar as fontes que deseja usar. Existem muitos sites na internet que oferecem fontes gratuitas, incluindo fontes do Google, fontspace e sites dafont.
Depois de baixar as fontes da Web, converta-as em diferentes formatos de fonte para oferecer suporte a vários navegadores. Você pode usar ferramentas gratuitas de conversão de fontes online para fazer isso. Os navegadores da Web modernos oferecem suporte aos formatos .woff e .woff2. Se você precisar oferecer suporte a navegadores herdados, forneça também os formatos .eot e .ttf.
Crie uma nova pasta chamada fontes no diretório do site e salve os arquivos de fonte convertidos lá.
O próximo passo é incluir as faces da fonte no estilos/global.css arquivo para torná-los disponíveis para todo o site. Este exemplo mostra as faces da fonte para a fonte sereia em negrito:
@Tipo de letra {
família de fontes: 'sereia';
src: url('Mermaid-Bold.eot');
src: url('Mermaid-Bold.eot?#iefix') formato('tipo aberto embutido'),
url('Mermaid-Bold.woff2') formato('woff2'),
url('Mermaid-Bold.woff') formato('woff'),
url('Mermaid-Bold.ttf') formato('tipo verdadeiro');
intensidade da fonte: Negrito;
estilo da fonte: normal;
exibição de fonte: swap;
}
Depois de incluir os arquivos de fonte, você pode usar essas fontes em um arquivo CSS de nível de componente:
h1 {
font-family: Mermaid;
}Incluindo Web Fonts para Next.js por meio de um CDN
Alguns sites fornecem fontes da Web por meio de um CDN que você pode importar para seu aplicativo. Essa abordagem é fácil de configurar porque você não precisa baixar fontes ou criar fontes. Além disso, se você usar fontes do Google ou TypeKit, o Next.js cuidará automaticamente da otimização.
Você pode adicionar fontes de um CDN usando a tag link ou a regra @import dentro de um arquivo CSS.
A tag link sempre vai dentro da tag head de um documento HTML. Para adicionar uma tag head em Next.js, você deve criar um documento personalizado. Este documento modifica a tag head e body usada para renderizar cada página.
Comece a usar esse recurso de documento personalizado criando o arquivo /pages/_document.js.
Em seguida, inclua o link para a fonte no cabeçalho do arquivo _document.js.
importar Documento, { Html, Head, Main, NextScript } de "próximo/documento";
aulaMeu documentoestendeDocumento{
estáticoassíncrono getInitialProps (ctx) {
const inicialProps = aguardam Document.getInitialProps (ctx);
retornar { ...initialProps };
}
render() {
retornar (
<HTML>
<Cabeça>
<link
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&exibir=trocar"
rel ="folha de estilo"
/>
</Head>
<corpo>
<Principal />
<NextScript />
</body>
</Html>
);
}
}
exportarpadrão Meu documento;Como usar a regra @import para incluir fontes em um projeto Next.js
Outra opção é usar a regra @import no arquivo CSS que você deseja usar a fonte.
Por exemplo, disponibilize a fonte em todo o projeto importando a fonte da web no estilos/global.css arquivo.
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&exibir=trocar');
Agora você pode referenciar a família de fontes em um seletor de CSS assim:
h1 {
família de fontes:'Exibição Caslon Livre', serifa;
}A regra @import permite importar uma fonte em um arquivo CSS contido. O uso da tag de link torna a fonte acessível em todo o site.
Você deve hospedar fontes localmente ou importá-las por meio de um CDN?
As fontes hospedadas localmente são geralmente mais rápidas do que as fontes importadas de um CDN. Isso ocorre porque o navegador não precisa fazer uma solicitação adicional para a fonte CDN depois que a página da Web é carregada.
Se você quiser usar fontes importadas, pré-carregue-as para melhorar o desempenho do site. Se as fontes estiverem disponíveis no Google fonts ou Typekit, você pode importá-las e aproveitar os recursos de otimização do Next.js.
