Conoce a Lara — tu asistente de IA para todo. 💬 Pruébalo ahora.

Loading...

Fuentes en CSS

Unidades CSSTexto 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.

Sigue Tu Progreso 🚀

Aprende más fácilmente siguiendo tu progreso completamente gratis.


Herramientas destacadas

BoardlyLinksyChromoHub de Código

Seleccionar idioma

Establecer tema

© 2025 ReadyTools. Todos los derechos reservados.