Cómo comenzar a usar la API de Google Fonts

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

En esta guía, se explica cómo usar la API de Google Fonts para agregar fuentes a tus páginas web. No es necesario que realices ninguna programación; lo único que debes hacer es agregar un vínculo de hoja de estilo especial a tu documento HTML y, luego, hacer referencia a la fuente en un estilo CSS.

Ejemplo rápido:

A continuación, se muestra un ejemplo. Copia y pega el siguiente código HTML en un archivo:

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

Luego, abra el archivo en un navegador web moderno. Deberías ver una página en la que se muestra lo siguiente, en la fuente llamada Tangerine:

¡Hermosa Web!

Esa oración es texto común, así que puedes cambiar su apariencia mediante CSS. Intenta agregar una sombra al estilo del ejemplo anterior:

body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}

Ahora debería ver una sombra paralela debajo del texto:

¡Hermosa Web!

Y eso es solo el comienzo de lo que puedes hacer con la API de Fuentes y CSS.

Descripción general

Puedes comenzar a usar la API de Google Fonts en solo dos pasos:

  1. Agrega un vínculo de hoja de estilo para solicitar las fuentes web deseadas:

    <link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Font+Name">
    

  2. Diseña un elemento con la fuente web solicitada, ya sea en una hoja de estilo:

    .css-selector {
    font-family: 'Font Name', serif;
    }
    

    o con un estilo intercalado en el propio elemento:

    <div style="font-family: 'Font Name', serif;">Your text</div>
    

Si deseas obtener una lista de las fuentes que puedes usar, consulta Google Fonts.

Especificación de las familias de fuentes y los estilos en una URL de la hoja de estilo

Para determinar la URL que se debe usar en tu vínculo de hoja de estilo, comienza con la URL base de la API de Google Fonts:

https://fonts.googleapis.com/css

Luego, agrega el parámetro de URL family= con uno o más nombres y estilos de familias de fuentes.

Por ejemplo, para solicitar la fuente Inconsolata:

https://fonts.googleapis.com/css?family=Inconsolata

Para solicitar varias familias de fuentes, separa los nombres con un carácter de barra vertical (|).

Por ejemplo, para solicitar las fuentes Tangerine, Inconsolata y Droid Sans, haz lo siguiente:

https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

Si solicita varias fuentes, puede usar todas en su página. (pero no te excedas; la mayoría de las páginas no necesitan demasiadas fuentes, y solicitar muchas fuentes puede hacer que las páginas tarden en cargarse).

La API de Google Fonts proporciona la versión normal de las fuentes solicitadas de forma predeterminada. Para solicitar otros estilos o grosores, agrega dos puntos (:) al nombre de la fuente, seguido de una lista de estilos o grosores separados por comas (,).

Por ejemplo:

https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

A fin de averiguar qué estilos y estilos están disponibles para una fuente determinada, consulta la ficha de fuentes en Google Fonts.

Para cada estilo que solicites, puedes proporcionar el nombre completo o una abreviatura. Para los pesos, también puedes especificar un peso numérico:

Style Especificadores
cursiva italic o i
negrita bold o b o un peso numérico, como 700
negrita y cursiva bolditalic o bi

Por ejemplo, para solicitar cursiva cantarell cursiva y negrita Serif en negrita, puedes usar cualquiera de las siguientes URL:

https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

Cómo usar la visualización de fuentes

font-display te permite controlar lo que sucede cuando la fuente no está disponible. Se suele especificar un valor distinto de auto predeterminado.

Pasa el valor deseado en el parámetro display de la string de consulta:

https://fonts.googleapis.com/css?family=Roboto&display=swap

Cómo especificar subconjuntos de secuencias de comandos

Algunas de las fuentes del Directorio de fuentes de Google admiten varias secuencias de comandos (como el latino, el cirílico y el griego, por ejemplo). Para especificar qué subconjuntos deben descargarse, el parámetro de subconjunto se debe agregar a la URL.

Por ejemplo, para solicitar el subconjunto cirílico de la fuente Roboto Mono, la URL sería la siguiente:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic

Para solicitar el subconjunto griego de la fuente Roboto Mono, la URL sería la siguiente:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek

Para solicitar subconjuntos griego y cirílico de la fuente Roboto Mono, la URL sería la siguiente:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic

El subconjunto latino siempre se incluye si está disponible y no es necesario especificarlo. Ten en cuenta que, si un navegador cliente admite el intervalo Unicode (http://caniuse.com/#feat=font-unicode-range), se ignorará el parámetro de subconjunto; el navegador seleccionará uno de los subconjuntos compatibles con la fuente para obtener los elementos necesarios a fin de procesar el texto.

Para obtener una lista completa de las fuentes y los subconjuntos de fuentes disponibles, consulta Google Fonts.

Cómo optimizar tus solicitudes de fuentes

A menudo, cuando quieres usar una fuente web en tu sitio web o aplicación, sabes con anticipación qué letras necesitarás. Esto suele ocurrir cuando usas una fuente web en un logotipo o encabezado.

En estos casos, debes considerar especificar un valor text= en tu URL de solicitud de fuente. Esto le permite a Google mostrar un archivo de fuente optimizado para tu solicitud. En algunos casos, esto puede reducir el tamaño del archivo de fuente hasta en un 90%.

Para usar esta función, simplemente agrega text= a tus solicitudes a la API de Google Fonts. Por ejemplo, si solo usas Inconsolata para el título de tu blog, puedes poner el título en sí como el valor de text=. La solicitud se vería de la siguiente manera:

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello

Al igual que con todas las strings de consulta, debes codificar el valor de la URL:

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World

Esta función también sirve para fuentes internacionales, lo que te permite especificar caracteres UTF-8. Por ejemplo, "¡Hola!" se representa de la siguiente manera:

https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!

Cómo habilitar efectos de fuente (beta)

Cuando creas encabezados o textos de texto en tu sitio web, a menudo querrás diseñar tu texto de manera decorativa. A fin de simplificar tu trabajo, Google proporcionó una colección de efectos de fuente que puedes usar con un esfuerzo mínimo para producir un texto de visualización atractivo. Por ejemplo:

Este es un efecto de fuente.

Para usar esta función beta, solo debes agregar effect= a tu solicitud a la API de Google Fonts y agregar el nombre de clase correspondiente a los elementos HTML que deseas modificar. En nuestro ejemplo anterior, usamos el efecto de fuente shadow-multiple, por lo que la solicitud se vería de la siguiente manera:

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple

Para usar el efecto, agrega el nombre de clase correspondiente a tus elementos HTML. El nombre de clase correspondiente siempre es el nombre del efecto con el prefijo font-effect-, por lo que el nombre de la clase para shadow-multiple sería font-effect-shadow-multiple:

<div class="font-effect-shadow-multiple">This is a font effect!</div>

Puedes solicitar varios efectos si separas los nombres de efectos con un carácter de barra vertical (|).

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float

A continuación, se incluye una lista completa de todos los efectos de fuente que ofrecemos:

Efecto Nombre de la API Nombre de clase Asistencia
Anaglifo anaglyph font-effect-anaglyph Chrome, Firefox, Opera, Safari
Señal de ladrillo brick-sign font-effect-brick-sign Chrome, Safari
Lienzo impreso canvas-print font-effect-canvas-print Chrome, Safari
Crujido crackle font-effect-crackle Chrome, Safari
En decaimiento decaying font-effect-decaying Chrome, Safari
Destrucción destruction font-effect-destruction Chrome, Safari
Angustiado distressed font-effect-distressed Chrome, Safari
madera desgastada distressed-wood font-effect-distressed-wood Chrome, Safari
Relajado emboss font-effect-emboss Chrome, Firefox, Opera, Safari
Bomberos fire font-effect-fire Chrome, Firefox, Opera, Safari
Animación de incendios fire-animation font-effect-fire-animation Chrome, Firefox, Opera, Safari
Frágil fragile font-effect-fragile Chrome, Safari
Pasto grass font-effect-grass Chrome, Safari
Hielo ice font-effect-ice Chrome, Safari
Mitosis mitosis font-effect-mitosis Chrome, Safari
Neón neon font-effect-neon Chrome, Firefox, Opera, Safari
Descripción outline font-effect-outline Chrome, Firefox, Opera, Safari
Me gusta el golf putting-green font-effect-putting-green Chrome, Safari
Acero redondeado scuffed-steel font-effect-scuffed-steel Chrome, Safari
Shadow múltiples shadow-multiple font-effect-shadow-multiple Chrome, Firefox, Opera, Safari
Dividir splintered font-effect-splintered Chrome, Safari
Estática static font-effect-static Chrome, Safari
Lavado de piedra stonewash font-effect-stonewash Chrome, Safari
Tres dimensiones 3d font-effect-3d Chrome, Firefox, Opera, Safari
Punto flotante en tres dimensiones 3d-float font-effect-3d-float Chrome, Firefox, Opera, Safari
Vintage vintage font-effect-vintage Chrome, Safari
Fondo de pantalla wallpaper font-effect-wallpaper Chrome, Safari

Existen muchas formas más de aplicar estilos a tus fuentes, y muchas cosas son posibles a través de CSS. Simplemente le ofrecemos algunas ideas para comenzar. Para obtener más ideas, prueba buscar en Google efectos de texto de css y explorar muchas de las ideas que ya están en la Web.

Lecturas adicionales

  • Consulta una lista completa de las familias de fuentes que proporciona la API de Google Fonts en Google Fonts.
  • Aprende a usar el Cargador de fuentes web para tener más control sobre la carga de fuentes.
  • Obtén más información sobre cómo funciona la API de Google Fonts en la página de Consideraciones técnicas.