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.

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

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

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.

Encuentra la fuente que quieras usar en el catálogo de Fontsource. Este ejemplo usará Twinkle Star.
Instala el paquete de la fuente que hayas elegido.
- npm
- pnpm
- Yarn
Ventana de terminal
npm install @fontsource/twinkle-star
Ventana de terminal
pnpm add @fontsource/twinkle-star
Ventana de terminal
yarn add @fontsource/twinkle-star
Puedes encontrar el nombre correcto del paquete en la sección “Quick Installation” en la página de cada fuente en el sitio de Fontsource. Comienza con @fontsource/ o @fontsource-variable/ seguido del nombre de la fuente.
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';
---
```
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;
}
```

Para optimizar los tiempos de renderizado de tu sitio web, puede que quieras precargar las fuentes que son esenciales para la visualización inicial de la página. Consulta la guía de Fontsource para precargar fuentes para obtener más información y uso.

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:

Sigue los pasos de las guías anteriores, pero deja sin completar el paso final sobre agregar una font-family en tu CSS.
Agrega el nombre de la tipografía en tailwind.config.mjs.

Este ejemplo agrega Inter al conjunto de tipografías sans-serif, junto con fuentes de respaldo predeterminadas por 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: [],
}
```
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

Aprende como las fuentes web funcionan en la guía de fuentes web de MDN.
Genera CSS para tu fuente con el generador de fuentes web de Font Squirrel.

Contribuir

Comunidad