Pular para o conteúdo

Utilizando fontes customizadas

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

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 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;
    }
  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>

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/LayoutBase.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;
    }

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

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

    tailwind.config.mjs
    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.