Home-theater-designers
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.
MAKEUSEO VÍDEO DO DIA
Como usar fontes auto-hospedadas no Next.js
Para adicionar fontes auto-hospedadas no 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 font-face, você deve baixar as fontes que deseja usar. Existem muitos sites na internet que oferecem fontes gratuitas , incluindo os sites de fontes, fontspace e dafont do Google.
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 de conversão de fontes online gratuitas fazer isso. Os navegadores da Web modernos suportam os formatos .woff e .woff2. Se você precisar oferecer suporte a navegadores legados, também deverá fornecer os formatos .eot e .ttf.
Crie uma nova pasta chamada fontes no diretório do seu site e salve seus arquivos de fonte convertidos lá.
O próximo passo é incluir as faces da fonte no estilos/global.css arquivo para disponibilizá-los para todo o site. Este exemplo mostra as faces da fonte para a 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 fonte, você pode usar essas fontes em um arquivo CSS de nível de componente:
como jogar jogos cooperativos locais online
h1 {
font-family: Mermaid;
}Incluindo Web Fonts no Next.js por meio de um CDN
Alguns sites oferecem 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 faces de fonte. Além disso, se você usa fontes do Google ou TypeKit, o Next.js lida automaticamente com a otimização.
Você pode adicionar fontes de um CDN usando a tag de 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 vai dentro da tag head de um documento HTML. Para adicionar uma tag head no 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 este 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.
como encontrar capturas de tela no mac
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 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&display=swap');
Agora você pode fazer referência à família de fontes em um Seletor de CSS assim:
h1 {
font-family:'Libre Caslon Display', serif;
}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 à fonte CDN depois que a página da Web for 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ê poderá importá-las e aproveitar os recursos de otimização do Next.js.