Utilidades de Fuente - Tailwind CSS

🎨 Extender fuentes personalizadas en Tailwind CSS v3

Para agregar una fuente personalizada en Tailwind v3, debes extender la configuración en el archivo tailwind.config.js.

// tailwind.config.js
module.exports = {
  content: ["./*.html"],
  theme: {
    extend: {
      fontFamily: {
        custom1: ['"MiFuente"', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

Luego, puedes usarla en tu HTML con la clase font-custom1:

<div class="font-custom1">
  Este texto usa la fuente personalizada definida en tailwind.config.js
</div>

Asegúrate de importar la fuente desde Google Fonts o definirla mediante @font-face en tu CSS.

font-custom1

🎨 Extender fuentes personalizadas en Tailwind CSS v4

En Tailwind v4, puedes definir nuevas fuentes directamente usando la regla @theme dentro de tu index.css.

@import "tailwindcss";

@theme {
  --font-custom2: "MiFuente", sans-serif;
}

Después, puedes aplicar la fuente con la clase font-custom2 en tu HTML:

<div class="font-custom2">
  Este texto usa la fuente personalizada definida en @theme
</div>

Al igual que en versiones anteriores, asegúrate de importar la fuente en tu HTML o CSS, por ejemplo, desde Google Fonts o mediante @font-face.

font-custom2

✍️ Utilidades de Fuente en Tailwind CSS

🔩 Pesos de Fuente

🅰️ Estilo de Fuente

🔗 Familia de Fuentes

🎨 Extender fuentes personalizadas en Tailwind CSS v3

🎨 Extender fuentes personalizadas en Tailwind CSS v4