Cargando...

Fuentes web en CSS

Ya conoces font-family, tamaño y peso. Las fuentes web cargan una tipografía que no está necesariamente en el dispositivo del visitante — declárala con @font-face, usa el nombre de familia como cualquier otra fuente y termina con un fallback calmado.

Piezas de @font-face

📊 @font-face de un vistazo

Pieza Trabajo cotidiano
font-family El nombre que inventas y luego usas en CSS
src Dónde viven el/los archivo(s) de fuente (url(...) y a menudo format(...))
font-weight / font-style Qué cara representa este archivo (regular, bold, italic…)
font-display Cómo se comporta el texto mientras carga la fuente (p. ej. swap)

Piénsalo en dos pasos calmados: registra la cara con @font-face y luego llama ese mismo nombre de familia en tus reglas normales. Si omites uno, la pila nunca encuentra el archivo personalizado.

Un @font-face mínimo

Da a la cara un nombre claro y apunta src a un archivo de fuente en tu sitio (o CDN).

@font-face básico

css
CSS Code 
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}

Ofrece más de un formato

Los navegadores modernos prefieren woff2. Listar woff después cubre navegadores más antiguos. Pon el mejor formato primero.

woff2 luego woff

css
CSS Code 
@font-face {
font-family: "Site Sans";
src:
url("/fonts/site-sans.woff2") format("woff2"),
url("/fonts/site-sans.woff") format("woff");
font-weight: 400;
font-style: normal;
}

font-display — muestra el texto antes

font-display: swap deja que el navegador muestre texto de fallback primero y luego intercambie la fuente web al llegar — a menudo mejor que un hueco largo invisible.

Display swap

css
CSS Code 
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}

Usa la familia que declaraste

Tras @font-face, llama al mismo nombre font-family en tus reglas — y mantén un fallback genérico.

Aplicar la familia personalizada

css
CSS Code 
body {
font-family: "Site Sans", system-ui, "Segoe UI", sans-serif;
font-size: 1rem;
line-height: 1.6;
}

Un hábito calmado de autoalojamiento

Aloja solo los pesos que necesitas, prefiere woff2, pon font-display y mantén siempre una pila de sistema/genérica.

Título con cara bold cargada

css
CSS Code 
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans-bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}

h1 {
font-family: "Site Sans", Georgia, serif;
font-weight: 700;
}

Pruébalo tú

  1. Escribe un bloque @font-face con un font-family personalizado y un src woff2.
  2. Añade una segunda línea src para woff.
  3. Pon font-display: swap.
  4. Aplica "Your Name", sans-serif en body.
  5. Si tienes un archivo bold, añade un @font-face aparte para peso 700 — luego font-weight: 700 en un título.

Errores comunes

  • Declarar @font-face pero nunca usar ese nombre exacto en font-family
  • Omitir la pila de fallback (se rompe si el archivo falla)
  • Cargar muchos pesos y estilos que no usas (páginas lentas)
  • Dejar el texto invisible mucho tiempo sin estrategia font-display
  • Mezclar esta lección con text-shadow / efectos (vienen después)

Resumen

  • @font-face registra un nombre de familia personalizado y apunta a archivos de fuente
  • Prefiere woff2, opcionalmente con woff de respaldo
  • font-display: swap a menudo mantiene el texto legible mientras cargan las fuentes
  • Usa el mismo nombre de familia en CSS con un fallback de sistema/genérico
  • Carga solo las caras que necesitas; efectos como text-shadow son una lección posterior

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
8
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 28 de 35
Css Tutorial