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.
✨ Pregunta a Lara — tu compañera de estudio con IA
Desbloquea soporte de aprendizaje personalizado. Lara puede explicar lecciones, resumir temas y responder tus preguntas — disponible desde el plan Go y superiores.
Lara te ayuda a aprender más rápido — exclusivo para los miembros ReadyTools Go, Plus y Max.
