Fuentes en CSS

Las fuentes juegan un papel fundamental en la apariencia de un sitio web. La elección correcta de la tipografía influye en la legibilidad, el diseño y la experiencia del usuario.

Sintaxis básica: font-family

Con la propiedad <font-family> se define qué tipografía debe usar un elemento. Siempre conviene especificar varias alternativas (fallback) por si la principal no está disponible.

Fuentes predeterminadas

Los navegadores incluyen varias tipografías incorporadas como Arial, Times New Roman o Courier New. Estas pueden configurarse fácilmente.

Estilo tipográfico y tipografía

En CSS también se pueden usar configuraciones tipográficas adicionales: <font-weight> para el grosor, <line-height> para el interlineado y <letter-spacing> para el espaciado entre letras.

Uso de Google Fonts

Con Google Fonts se pueden importar tipografías modernas y gratuitas. Para ello, se usa el elemento <link> en la sección <head>, y luego se referencia en CSS.

@font-face y fuentes personalizadas

También se pueden añadir fuentes propias con la regla @font-face. En este caso, se sube el archivo de la tipografía (ej. WOFF2) y se declara en el CSS.

Consejos para usar fuentes

Una buena tipografía mejora la legibilidad y la experiencia del usuario. Aquí algunos consejos:

Especifica siempre fuentes de respaldo (fallback).
Evita usar demasiadas tipografías distintas en una misma página.
Ten en cuenta la tipografía responsiva para asegurar la legibilidad en móviles y escritorio.