Cómo añadir Google Fonts a tu web (3 formas fáciles)

Para añadir una fuente de Google a tu web hay que hacer dos trabajitos: cargar la fuente y decirle a tu texto que la use. Puedes cargarla con una etiqueta <link> en el encabezado (el head) de tu página, con una línea @import al principio de tu CSS o desde archivos de fuente que alojes tú mismo. La forma más rápida de obtener las líneas exactas es la extensión gratis FontMee: pruebas la fuente en tu propia web, pulsas Copiar CSS y pegas. Abajo tienes las tres formas, con código que puedes copiar tal cual.

Qué significa de verdad “añadir una fuente”

Piensa en una fuente como en un invitado a una cena. Primero hay que invitarla, es decir, tu página tiene que descargar el archivo de la fuente. Después hay que darle un sitio en la mesa, es decir, decirle a tu texto que la use. Si te saltas la invitación, la fuente nunca aparece. Si te saltas el sitio, se queda en un rincón mientras tu texto sigue con su fuente de siempre.

Los dos trabajos se escriben en CSS, el conjunto de reglas de estilo que le dice a una web cómo verse. La invitación va en el head de tu página (una zona oculta al principio del HTML donde el navegador lee sus instrucciones) o en lo más alto de tu archivo CSS. El sitio en la mesa es una regla corta, como la de los ejemplos de abajo. Elijas la forma que elijas, esos dos trabajos son los mismos.

Forma 1: una etiqueta link en el head de tu página

Es el método que Google enseña en su propia web. Pones tres líneas en el head de tu página: dos que le dicen al navegador que se prepare para conectarse a Google y una que carga la fuente. Suele cargar un poco antes que las otras formas, porque el navegador puede empezar a pedir la fuente antes incluso de haber leído tu CSS.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap">
  <style>
    h1, h2 { font-family: 'Lora', serif; }
  </style>
</head>

La última parte del enlace, display=swap, le dice al navegador que muestre tu texto enseguida con una fuente de repuesto y cambie a la real cuando llegue, así los visitantes nunca ven un hueco en blanco. La palabra tras la coma de tu regla (serif) es esa fuente de repuesto, y Google recomienda poner siempre una. Usa esta forma cuando puedas editar el HTML de tu página.

Forma 2: una línea @import al principio de tu CSS

A veces no puedes tocar el head de la página, solo el CSS. Es lo que pasa con el cuadro de CSS adicional de WordPress, la sección de CSS de muchos constructores de webs o un simple archivo style.css. Entonces la invitación puede vivir dentro de tu CSS, como una sola línea que tiene que ir arriba del todo, antes de cualquier otra regla.

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');

h1, h2 { font-family: 'Lora', serif; }

Es la más fácil de pegar, pero suele ser un pelín más lenta que la etiqueta link, porque el navegador solo descubre la fuente cuando ya ha leído tu CSS. En una web pequeña apenas lo notarás.

Forma 3: aloja tú mismo los archivos de la fuente

Aquí descargas los archivos de la fuente de Google, los subes a tu propia web y apuntas a ellos, de modo que los navegadores de tus visitantes no se conectan a Google para nada. Algunos eligen esto por privacidad, otros por velocidad y otros porque las normas sobre ello cambian de un país a otro, así que comprueba qué te afecta según tus visitantes. Lleva unos pasos más, pero nada es difícil: copias una carpeta y añades una regla que dice dónde está el archivo.

@font-face {
  font-family: 'Lora';
  src: url('fonts/lora-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

h1, h2 { font-family: 'Lora', serif; }

Las Google Fonts son de código abierto, así que puedes descargarlas y alojarlas, también en proyectos comerciales. Lo lento es encontrar y descargar cada archivo y escribir a mano cada bloque @font-face. FontMee lo hace por ti, como verás enseguida.

¿Qué forma elegir?

• Puedes editar el HTML de tu página: usa la etiqueta link (forma 1).
• Solo puedes editar CSS, o usas un constructor de webs con un cuadro de CSS: usa @import (forma 2).
• Quieres que los navegadores de tus visitantes lo carguen todo desde tu propio servidor: aloja los archivos (forma 3).

¿No lo tienes claro? Empieza por la forma 1 o la 2. Luego puedes cambiar, y solo cambia la línea que carga la fuente.

Consigue el código exacto con FontMee

Escribir estas líneas a mano es donde se cometen casi todos los fallos: un signo más que falta, un grosor que la fuente no tiene, una regla que no coincide con tus títulos. FontMee es una extensión gratis de Chrome, un pequeño complemento que le da al navegador una función nueva, y escribe las líneas por ti. Primero pruebas la fuente en tu web real, ves cómo queda y luego copias el código de justo esa elección. Tiene más de 1.900 fuentes, y el vídeo muestra el panel en acción.

1. Instala FontMee. Añádela desde la Chrome Web Store. Es gratis y no pide cuenta. Pulsa el icono del puzle en Chrome y fíjala, así siempre está a un clic.
2. Abre tu web y pulsa 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 de chrome://) no se pueden cambiar.
3. Elige dónde va la fuente. En Aplicar los cambios a elige Todo, Títulos o Texto y pulsa una fuente. Puedes hacer títulos y texto por separado.
4. Compruébalo en la página real. Alterna entre Fuente original y Vista previa de FontMee y usa Ajustar para el tamaño, el grosor y la altura de línea hasta que quede bien.
5. Pulsa Copiar CSS. Se abre una ventana con cuatro pestañas: CSS (la forma del @import), HTML (la forma de la etiqueta link), Variables y Tailwind para quien las use. Elige la pestaña que corresponda a tu forma, pulsa Copiar al portapapeles y pégalo en tu sitio. FontMee solo le pide a Google los grosores que la fuente realmente tiene, así que no acabas con un enlace roto.
6. ¿Quieres la forma 3? En la misma ventana pulsa Descargar ZIP para alojar tú mismo. Recibes una carpeta con los archivos de la fuente, un fonts.css, un fontmee.css y un README corto. Sube la carpeta y añade los dos enlaces a las hojas de estilo.

Cuatro cosas que revisar antes de publicar

• Carga solo lo que uses. Cada fuente y grosor de más hace tu página un poco más pesada. Dos fuentes y dos grosores bastan en casi todas las webs.
• Ten una fuente de repuesto. Termina cada font-family con un nombre genérico como serif o sans-serif, para que el texto se vea bien mientras carga la fuente.
• Comprueba las letras que necesitas. Los acentos como ñ, ç o ş, y las letras cirílicas o vietnamitas, no están en todas las fuentes. Previsualiza tus propias palabras en FontMee antes de copiar.
• Revisa la licencia. Google Fonts es de código abierto y gratis para uso comercial. La ventana de código de FontMee indica la licencia de cada fuente, así que puedes verla antes de publicar.

¿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