Cómo usar una fuente personalizada en tu web (pruébala primero)

Para usar una fuente personalizada en tu web, subes el archivo de la fuente a tu sitio, le dices a tu CSS dónde está con una regla @font-face y luego la usas con font-family. Antes de nada de eso puedes probar la fuente en tus páginas reales: con la extensión gratuita FontMee cargas un archivo .woff2, .ttf u .otf de tu ordenador y lo ves en cualquier web con un clic, sin cambiar nada y sin subir nada.

Qué es una fuente personalizada

Una fuente personalizada es simplemente un archivo de fuente que no es ninguna de las que ya trae todo ordenador ni una de las gratuitas de Google Fonts. Puede ser una fuente de marca de un diseñador, una que compraste o una que hiciste tú. Suele venir como un archivo que termina en .woff2, .woff, .ttf u .otf. ¿Aún no tienes archivo? Nuestra guía para añadir Google Fonts cubre las gratuitas.

Para webs, .woff2 es la mejor opción: es pequeño, así que las páginas cargan más rápido, y todos los navegadores actuales pueden leerlo. .ttf y .otf son los formatos que usas en el ordenador. También funcionan en los navegadores, pero los archivos pesan más. Si solo tienes un .ttf u .otf, para probar sirve perfectamente.

Paso 1: Pruébala primero en una web real

Subir una fuente y escribir código solo para descubrir que no te gusta te hace perder una tarde. FontMee es una extensión gratuita de Chrome, un pequeño complemento que da a Chrome una función nueva, y te deja probar fuentes primero en una página en vivo. También acepta tus propios archivos. El vídeo corto muestra el panel.

1. Instala FontMee. Añádela desde Chrome Web Store. Es gratis y no pide cuenta. Haz clic en el icono del puzle de Chrome y fíjala, así siempre está a un clic.
2. Abre una página de tu web y haz clic en el icono de FontMee. El panel se abre junto a la página. También puedes pulsar Alt + Shift + F. Las páginas propias de Chrome (Nueva pestaña, la Web Store, las páginas chrome://) no se pueden cambiar.
3. Pulsa Subir y elige tu archivo de fuente. Puedes elegir varios a la vez, de hasta 6 MB cada uno. FontMee pone a la fuente el nombre del archivo, así que my_brand_sans.woff2 se convierte en my brand sans.
4. Búscala en Mis fuentes. Tus archivos subidos tienen su propio filtro y llevan la marca Tuya. Pasa el ratón sobre una para cambiarle el nombre con el lápiz o borrarla con la papelera.
5. Haz clic en la fuente para probarla. En Aplicar los cambios a elige Todo, Títulos o Texto. Usa Ajustar para el tamaño, el grosor y el interlineado, y alterna entre Fuente original y Vista previa de FontMee para comparar.
6. Escribe tus propias palabras. En el cuadro de texto de muestra escribe un titular real, un nombre o una frase con tus letras especiales, para ver cómo las maneja la fuente.

Tus archivos de fuente se quedan en tu navegador, en tu ordenador. No se sube nada, y la prueba solo cambia lo que ves tú, así que nadie más se entera. ¿Quieres enseñarle el resultado a un cliente? FontMee puede hacer una imagen de antes y después: así se hace.

Paso 2: Pon el archivo de la fuente en tu web

Cuando estés contento, la fuente tiene que vivir en tu sitio, porque los navegadores de los visitantes solo pueden cargar archivos que estén en internet, no en tu ordenador. Crea una carpeta llamada fonts y sube el archivo a ella, igual que subes imágenes: con el administrador de archivos de tu hosting, por FTP o con la subida de fuentes que quizá ofrezca tu constructor de webs. La carpeta podría verse así:

your-website/
  index.html
  style.css
  fonts/
    my-brand-sans.woff2
    my-brand-sans.ttf

Usa nombres de archivo sencillos, en minúsculas y sin espacios (my-brand-sans.woff2, no My Brand Sans (1).woff2). Así evitas una causa clásica de «mi fuente no aparece».

Paso 3: Cuéntale a tu CSS lo de la fuente

Ahora escribes dos cosas pequeñas en tu CSS, las reglas que dicen a la página cómo verse. Primero un bloque @font-face, que dice «existe una fuente con este nombre y su archivo está aquí». Después una regla normal que usa la fuente.

@font-face {
  font-family: 'My Brand Sans';
  src: url('/fonts/my-brand-sans.woff2') format('woff2'),
       url('/fonts/my-brand-sans.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'My Brand Sans', sans-serif;
}

h1, h2 {
  font-family: 'My Brand Sans', serif;
}

En cristiano: font-family en el primer bloque es un nombre que te inventas. src es dónde está el archivo, y la segunda línea es una copia de seguridad en .ttf para navegadores antiguos. font-display: swap muestra tu texto con una fuente de reserva hasta que llega la verdadera, así los visitantes nunca ven un espacio vacío. En las reglas de abajo, la palabra después de la coma (sans-serif) es esa fuente de reserva, y es buena costumbre añadir siempre una.

Pon este CSS donde tu sitio guarde sus estilos: en style.css, en WordPress en Apariencia, Personalizar, CSS adicional, o en la caja de CSS personalizado de tu constructor de webs. Si tu archivo está en otra carpeta, cambia la ruta dentro de url().

El atajo: que FontMee lo escriba

De vuelta en FontMee, pulsa Copiar CSS. Para una fuente que subiste, FontMee escribe tus reglas y añade un comentario con una línea @font-face para empezar. Cambia el nombre y la extensión del archivo si los tuyos son distintos, por ejemplo a .ttf. ¿Prefieres todo hecho? Pulsa Descargar ZIP para alojar tú mismo. Obtienes una carpeta con tu archivo de fuente dentro de fonts, un fonts.css con el bloque @font-face, un fontmee.css con tus reglas y un README corto. Sube la carpeta, enlaza las dos hojas de estilo y listo.

Cuatro cosas que comprobar antes de publicar

• Comprueba la licencia. Un archivo de fuente en tu ordenador no es automáticamente libre para ponerlo en una web. Muchas licencias cubren solo el uso de escritorio y tienen una licencia web aparte. FontMee te lo recuerda con «tu propio archivo: revisa su licencia antes de publicar». Si dudas, pregunta dónde conseguiste la fuente.
• Comprueba tus letras. Escribe en el cuadro de muestra palabras con tus caracteres especiales (ñ, á, é, ü, ç). Una fuente puede verse perfecta y aun así carecer de algunas letras, y entonces esas letras aparecen en una fuente de reserva.
• Mantén una fuente de reserva. Termina cada font-family con serif o sans-serif, para que el texto se vea bien mientras carga la fuente.
• Que pese poco. Una o dos fuentes bastan. Cada archivo extra hace la página un poco más pesada, así que elige .woff2 cuando puedas.

¿Aún no tienes web? Entonces la fuente va en segundo lugar. Además, una web necesita un lugar donde vivir, y un constructor es la forma más rápida de conseguirlo sin código.

Consigue la extensión

FontMee es gratis, con más de 1.900 fuentes, Copiar CSS en cuatro formatos, un ZIP para alojar tú mismo y la subida de tus propias fuentes. Sin cuenta, sin suscripción. Añádela desde la Chrome Web Store o lee primero la página de FontMee.

Conviene saber antes de empezar

Preguntas frecuentes