Como adicionar fontes da Web a um site Next.js
As fontes da Web podem ajudá-lo a projetar sua marca ou aprimorar o design do seu site, mas há mais de uma maneira de usá-las.
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, então você precisa incluí-las em seu projeto hospedando-as ou referenciando-as por meio de um CDN.
Aprenda 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 usar a regra CSS @font-face. Esta regra permite adicionar fontes personalizadas a uma página da web.
Antes de usar font-face, você deve baixar as fontes que deseja usar. Existem muitos sites na Internet que oferecem fontes gratuitas, incluindo os sites Google Fonts, Fontspace e 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 online gratuitas de conversão de fontes para fazer isso. Os navegadores modernos suportam os formatos .woff e .woff2. Se precisar oferecer suporte a navegadores legados, você também deve fornecer os formatos .eot e .ttf.
Crie uma nova pasta chamada fontes no diretório do seu site e salve os arquivos de fontes convertidos lá.
O próximo passo é incluir as fontes no arquivo styles/global.css para disponibilizá-las para todo o site. Este exemplo mostra as fontes da fonte sereia em negrito:
@font-face {
font-family: 'Mermaid';
src: url('Mermaid-Bold.eot');
src: url('Mermaid-Bold.eot?#iefix') format('embedded-opentype'),
url('Mermaid-Bold.woff2') format('woff2'),
url('Mermaid-Bold.woff') format('woff'),
url('Mermaid-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}
Depois de incluir os arquivos de fontes, você poderá usá-las em um arquivo CSS em nível de componente:
h1 {
font-family: Mermaid;
}
Incluindo fontes da Web em Next.js por meio de um CDN
Alguns sites oferecem fontes da web por meio de um CDN que você pode importar para o 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, 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.
Como importar fontes para um projeto Next.js usando uma tag de link
A tag link sempre fica 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 as tags head e body usadas 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.
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
Como usar a regra @import para incluir fontes em um projeto Next.js
Outra opção é usar a regra @import no arquivo CSS em que deseja usar a fonte.
Por exemplo, disponibilize a fonte em todo o projeto importando a fonte da web no arquivo styles/global.css.
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap');
Agora você pode referenciar a família de fontes em um seletor CSS como este:
h1 {
font-family:'Libre Caslon Display', serif;
}
A regra @import permite importar uma fonte em um arquivo CSS contido. Usar a tag do 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 ao CDN da fonte depois que a página da web for carregada.
Se 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ê poderá importá-las e aproveitar as vantagens dos recursos de otimização do Next.js.