Fontik

Cómo usar una fuente en una página web con CSS

Para mostrar una fuente en tu propio sitio, sube sus archivos WOFF2 a tu servidor y decláralos en CSS con @font-face. Los visitantes no tienen que instalar nada.

Última actualización:

Pasos

  1. Usa los archivos WOFF2: pesan poco y todos los navegadores actuales los admiten. El kit web que puedes descargar desde la página de la fuente contiene archivos WOFF2 y CSS ya preparado.
  2. Sube los archivos de la fuente a tu propio servidor, por ejemplo a la carpeta /fonts/.
  3. Declara la fuente en CSS con @font-face: @font-face { font-family: "My Font"; src: url("/fonts/my-font.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
  4. Úsala en tus estilos e indica siempre fuentes de reserva: body { font-family: "My Font", system-ui, sans-serif; }
  5. font-display: swap muestra el texto enseguida con una fuente de reserva y la cambia por la tuya cuando termina de cargar.
  6. Para una fuente variable, usa un solo archivo y declara el rango de pesos en @font-face, por ejemplo font-weight: 100 900.

Consejos

  • Precarga el archivo principal con esta etiqueta en el head de la página: <link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/my-font.woff2">
  • Conserva solo los pesos que realmente uses.
  • Sirve los archivos desde el mismo origen que la página o envía cabeceras CORS si vienen de otro dominio.
  • Comprueba que la licencia permita el uso web; las fuentes gratuitas con licencias abiertas suelen permitirlo.

Preguntas

¿Qué archivos necesito para un sitio web?

Los archivos WOFF2. Pesan poco y funcionan en todos los navegadores actuales; el kit web de la página de la fuente los incluye junto con CSS ya preparado.

¿Tienen que instalar la fuente los visitantes?

No: el navegador descarga la fuente desde tu servidor en cuanto la página la pide.

¿Puedo usar la fuente en un proyecto comercial?

Depende de la licencia de la fuente. Léela en la página de la fuente del catálogo.

Otras guías