Pular para o conteúdo
Astro Astro

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.

  1. Adicione seu arquivo de fonte a public/fonts/.

  2. Adicione a seguinte declaração @font-face ao seu CSS. Isso pode ser num arquivo .css global que você importa, em um bloco <style is:global> ou em um bloco <style> do layout ou componente em que você quer utilizar esta fonte.

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

  3. 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.

  1. Encontre a fonte que você quer utilizar no catálogo do Fontsource. Esse exemplo vai usar Twinkle Star.

  2. Instale o pacote da sua fonte escolhida.

    Terminal window
    npm install @fontsource/twinkle-star

  3. 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/BaseLayout.astro
    ---
    import '@fontsource/twinkle-star';
    ---

  4. 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:

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

  2. Adicione o nome da typeface em tailwind.config.cjs.

    Este exemplo adiciona InterVariable e Inter a pilha de fontes sans-serif, com as fontes de fallback padrões do Tailwind CSS.

    tailwind.config.cjs
    const defaultTheme = require("tailwindcss/defaultTheme");
    

    module.exports = {
      // ...
      theme: {
        extend: {
          fontFamily: {
            sans: ["InterVariable", "Inter", ...defaultTheme.fontFamily.sans],
          },
        },
      },
      // ...
    };

    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ção.

Mais recursos