Utilizando fontes customizadas

Este guia irá te mostrar como incluir fontes web no seu projeto e utilizar elas em seus componentes.

Utilizando um arquivo de fonte local

Esse exemplo vai demonstrar como adicionar uma fonte personalizada usando o arquivo de fonte DistantGalaxy.woff.

Adicione seu arquivo de fonte a public/fonts/.

Adicione a seguinte declaração @font-face ao seu CSS. Isso pode ser feito num arquivo .css global que você importa, em um bloco <style is:global> ou em um bloco <style> em um layout ou componente específico no qual você deseja usar essa fonte.

/* Registre sua família de fontes customizada e informe ao navegador onde encontrá-la. */
@font-face {
  font-family: 'DistantGalaxy';
  src: url('/fonts/DistantGalaxy.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Utilize o valor font-family da declaração @font-face para estilizar elementos em seu componente ou layout. Neste exemplo, o título <h1> terá a fonte customizada aplicada, enquanto o parágrafo <p> não terá.
src/pages/exemplo.astro
```
---
---

<h1>Em uma galáxia muito, muito distante...</h1>

<p>Fontes customizadas fazem meus títulos tão mais legais!</p>

<style>
h1 {
  font-family: 'DistantGalaxy', sans-serif;
}
</style>
```

Utilizando Fontsource

O projeto Fontsource simplifica utilizar Google Fonts e outras fontes open-source. Ele providencia módulos npm que você pode instalar para as fontes que você quer utilizar.

Encontre a fonte que você quer utilizar no catálogo do Fontsource. Esse exemplo vai usar Twinkle Star.
Instale o pacote da sua fonte escolhida.
- npm
- pnpm
- Yarn
Terminal window
npm install @fontsource/twinkle-star
Terminal window
pnpm add @fontsource/twinkle-star
Terminal window
yarn add @fontsource/twinkle-star
Você irá encontrar o nome correto do pacote na seção “Quick Installation” (Instalação Rápida, em Português) da página de cada fonte no website do Fontsource. Ele começará com @fontsource/ ou @fontsource-variable/ seguido pelo nome da fonte.
Importe o pacote da fonte no componente que você quer utilizar a fonte. Geralmente, você vai querer fazer isso em um componente de layout comum para certificar-se de que a fonte está disponível em todo o seu site.

A importação irá automaticamente adicionar as regras do @font-face necessárias para configurar a fonte.
src/layouts/LayoutBase.astro
```
---
import '@fontsource/twinkle-star';
---
```
Utilize o nome da fonte como mostrado no exemplo body da página da fonte no Fontsource como o valor font-family. Isso irá funcionar em qualquer lugar aonde você pode escrever CSS em seu projeto Astro.
```
h1 {
  font-family: "Twinkle Star", cursive;
}
```

Registrar fontes no Tailwind

Se você estiver utilizando a integração para Tailwind, você pode ou adicionar uma declaração @font-face para uma fonte local ou utilizar a estratégia de import do Fontsource para registrar sua fonte.

Para registrar sua fonte no Tailwind:

Siga algum dos guias acima, mas pule a etapa final de adicionar font-family ao seu CSS.

Adicione o nome da typeface em tailwind.config.mjs.

Este exemplo adiciona Inter à pilha de fontes sans-serif, com fontes de fallback padrão do Tailwind CSS.

import defaultTheme from 'tailwindcss/defaultTheme'

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [],
}

Agora, todo texto sans-serif (o padrão no Tailwind) em seu projeto irá utilizar sua fonte escolhida e a classe font-sans também irá aplicar a fonte Inter.

Veja a documentação do Tailwind em como adicionar famílias de fontes customizadas para mais informações.

Mais recursos

Aprenda sobre como fontes ad web funcionam no guia da MDN em fontes web.
Gere CSS para sua fonte com o gerador de fontes web da Font Squirrel.

Contribua

Comunidade