Saltearse al contenido
Astro Astro

Usando fuentes personalizadas

Esta guía te mostrará cómo añadir fuentes web a tu proyecto y usarlas en tus componentes.

Usando un archivo de fuente local

Este ejemplo demostrará cómo añadir una fuente personalizada usando el archivo de fuente DistantGalaxy.woff.

  1. Añade tu archivo de fuente a la carpeta public/fonts/.

  2. Agrega la siguiente declaración @font-face a tu CSS. Esto puede ser en un archivo .css global que importes, un bloque <style is:global> o un bloque <style> en un diseño o componente específico donde quieras usar esta fuente.

    /* Registra tu font family personalizada y le indicamos al navegador dónde encontrarla. */
    @font-face {
      font-family: 'DistantGalaxy';
      src: url('/fonts/DistantGalaxy.woff') format('woff');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

  3. Usa el valor de font-family de la declaración @font-face para dar estilo a los elementos en tu componente o diseño. En este ejemplo, el encabezado <h1> tendrá la fuente personalizada aplicada, mientras que el párrafo <p> no.

    src/pages/example.astro
    ---
    ---
    

    <h1>En una galaxia muy, muy lejana...</h1>
    

    <p>¡Las fuentes personalizadas hacen que mis títulos se vean mucho mejor!</p>
    

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

Usando Fontsource

El proyecto Fontsource simplifica el uso de Google Fonts y otras fuentes de código abierto. Provee módulos npm que puedes instalar para las fuentes que desees utilizar.

  1. Encuentra la fuente que quieras usar en el catálogo de Fontsource. Este ejemplo usará Twinkle Star.

  2. Instala el paquete de la fuente que hayas elegido.

    Terminal window
    npm install @fontsource/twinkle-star

  3. Importa el paquete de la fuente en el componente donde quieras usar la fuente. Por lo general, querrás hacer esto en un componente de diseño común para asegurarte de que la fuente esté disponible en todo tu sitio.

    La importación añadirá las reglas de @font-face necesarias para configurar la fuente.

    src/layouts/BaseLayout.astro
    ---
    import '@fontsource/twinkle-star';
    ---

  4. Usa el nombre de la fuente como se muestra en el ejemplo body en la página de Fontsource para el valor de font-family. Esto funcionará en cualquier lugar donde puedas escribir CSS en tu proyecto de Astro.

    h1 {
      font-family: "Twinkle Star", cursive;
    }

Registrando fuentes con Tailwind

Si estás usando la integración de Tailwind, puedes usar cualquiera de los métodos anteriores en esta página para instalar tu fuente, con algunas modificaciones. Puedes añadir una declaración@font-face para una fuente local o usar la estrategia import de Fontsource para instalar tu fuente.

Para registrar tu fuente en Tailwind:

  1. Sigue los pasos de las guías anteriores, pero deja sin completar el paso final sobre agregar una font-family en tu CSS.

  2. Agrega el nombre de la tipografía en tailwind.config.cjs.

    Este ejemplo agrega InterVariable e Inter al conjunto de tipografías sans-serif, junto con fuentes de respaldo predeterminadas por Tailwind CSS.

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

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

    Ahora, todos los textos sans-serif (estilo por defecto en Tailwind) de tu proyecto utilizarán tu fuente elegida y la clase font-sans también aplicará la fuente Inter.

Revisa la documentación de Tailwind para agregar fuentes personalizadas para más información.

Más recursos