Integrando fuentes personalizadas en un proyecto de Vue 3 CLI con TailwindCSS

Personalizar las fuentes es una excelente manera de mejorar el atractivo visual y la singularidad de tu aplicación Vue 3. Vamos a sumergirnos en cómo instalar fuentes personalizadas como "Inter" en un proyecto de Vue 3 CLI que utiliza TailwindCSS.

Descarga los archivos de fuente

Primero, descarga los archivos de la fuente "Inter". Puedes obtenerlos de Google Fonts o directamente del sitio web de la fuente Inter. Asegúrate de tener los archivos de fuente en formatos .woff y .woff2 para una mejor compresión y tiempos de carga más rápidos. Otros formatos comunes son ttf, otf, eot y svg.

Agrega la fuente a tu proyecto

Una vez descargados, coloca los archivos de fuente en el directorio src/assets/fonts de tu proyecto de Vue 3. Crear una carpeta dedicada fonts ayuda a mantener tus assets organizados.

Elige el formato de fuente correcto

Al configurar tu @font-face, es vital especificar el formato correcto para tus archivos de fuente:

Archivos .woff: Usa format('woff')
Archivos .woff2: Usa format('woff2')
Archivos .ttf: Usa format('truetype')
Archivos .otf: Usa format('opentype')
Archivos .eot: Usa format('embedded-opentype')
Archivos .svg: Usa format('svg')

Esto asegura que los navegadores reconozcan y carguen el tipo de fuente apropiado.

Define Font-Face en TailwindCSS

TailwindCSS te permite colocar tus reglas @font-face directamente en el archivo principal tailwind.css. Aquí te mostramos cómo puedes definir la fuente "Inter" dentro de la directiva @layer base:

css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: 'Inter';
    src: url('@/assets/fonts/Inter-Regular.woff2') format('woff2'), url('@/assets/fonts/Inter-Regular.woff')
        format('woff');
    font-weight: 400;
    font-style: normal;
  }
  // ... Incluye todos los pesos y estilos de fuente que necesites
}

El @/ es un alias de tu directorio src y Vite (la herramienta de compilación de Vue 3) lo resolverá correctamente.

También podrías incluir font-display: swap para asegurar que el texto permanezca visible durante la carga de la fuente.

Actualiza la configuración de Tailwind

TailwindCSS utiliza un archivo de configuración para personalizar sus valores predeterminados. Extiende tu tailwind.config.js para incluir la fuente "Inter":

javascript

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
};

Este código establece "Inter" como la fuente sans-serif predeterminada para tu proyecto.

Usa la fuente en tus componentes

Ahora, puedes usar la fuente en tus componentes de Vue de esta manera:

html

<template>
  <div class="font-sans">Esto está usando la fuente Inter.</div>
</template>

La clase font-sans ahora corresponde a la fuente "Inter", aplicándola al texto dentro del div.

Compila y prueba

Ejecuta tu aplicación de Vue para ver los cambios:

bash

npm run serve

Inspecciona tu aplicación para asegurarte de que se esté aplicando la fuente "Inter". Es posible que debas borrar la caché de tu navegador o realizar una actualización forzada para ver la nueva fuente.

Conclusión

¡Felicidades! Has integrado con éxito una fuente personalizada en tu proyecto de Vue 3 y TailwindCSS. Siguiendo estos pasos, puedes inyectar más personalidad en tu aplicación con la fuente "Inter" o cualquier otra fuente de tu elección. Recuerda que la clave para una integración exitosa es la organización adecuada de tus archivos de fuente y la configuración correcta en tu configuración de Tailwind.

Integrando fuentes personalizadas en un proyecto de Vue 3 CLI con TailwindCSS ​

Descarga los archivos de fuente ​

Agrega la fuente a tu proyecto ​

Elige el formato de fuente correcto ​

Define Font-Face en TailwindCSS ​

Actualiza la configuración de Tailwind ​

Usa la fuente en tus componentes ​

Compila y prueba ​

Conclusión ​