Cómo añadir fuentes personalizadas a una web

1. Prepara los archivos de la fuente

Comprueba que tu licencia permita el uso web. Después, sube tus archivos TTF u OTF al Webfont Generator y descarga el ZIP. Normalmente solo necesitarás los archivos WOFF2.

2. Sube los archivos

Copia la carpeta fonts a tu sitio web, por ejemplo en /fonts/. Las fuentes deben cargarse desde tu propio dominio o desde un servidor que envíe la cabecera Access-Control-Allow-Origin correcta.

3. Añade las reglas @font-face

Cada grosor y estilo necesita una regla:

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

Usa el mismo nombre de familia para todos los grosores. Así, el navegador elige solo el archivo correcto para el texto normal y para el texto en negrita.

4. Usa la fuente

body {
  font-family: "Brand Sans", Arial, sans-serif;
}

Indica siempre fuentes alternativas, porque se muestran mientras tu fuente se carga o si no se puede cargar.

Cómo añadir fuentes en plataformas populares

• Webflow: ve a Site settings → Fonts → Custom fonts y sube tus archivos WOFF2.
• WordPress: los temas de bloques pueden gestionar las fuentes desde la biblioteca de fuentes del Site Editor. En otros temas, añade los archivos a un tema hijo y pon el CSS en su hoja de estilos.
• Tailwind CSS: añade las reglas a tu CSS y luego define la fuente como valor del tema. La pestaña Tailwind del Webfont Generator te proporciona el código.

Comprueba que funciona

Abre tu sitio y luego las herramientas de desarrollo de tu navegador. En el panel Network, filtra por Font y recarga la página. Cada archivo debería mostrar el estado 200. Un 404 suele indicar que la ruta de tu CSS es incorrecta. Una petición bloqueada suele apuntar a la cabecera de origen cruzado. Después, ejecuta el Page Speed Test para ver cómo afectan las fuentes a la velocidad.