Comienza a usar la API de Google Fonts

En esta guía, se explica cómo usar la API de Google Fonts para agregar fuentes a tus páginas web. No necesitas programar. Solo debes agregar un vínculo especial de hoja de estilo a tu documento HTML y, luego, consultar la fuente en un estilo CSS.

Ejemplo rápido:

Este es un ejemplo. Copia y pega el siguiente 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, abre el archivo en un navegador web moderno. Deberías ver una página que muestre lo siguiente, en la fuente llamada Tangerine:

Cómo hacer que la Web sea atractiva

Esa oración es texto común, por lo que puedes cambiar su apariencia con CSS. Intenta agregar una sombra al diseño del ejemplo anterior de la siguiente manera:

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

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

Cómo hacer que la Web sea atractiva

Eso es solo el comienzo de lo que puedes hacer con la API de Fonts 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. Aplica diseño 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>
    

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

Cómo especificar familias de fuentes y estilos en una URL de hoja de estilo

Para determinar qué URL usar en el vínculo de tu 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 familia de fuentes.

Por ejemplo, para solicitar la fuente Inconsolata, haz lo siguiente:

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:

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

La solicitud de varias fuentes te permite usar todas esas fuentes en tu página. (Sin embargo, no te excedas, la mayoría de las páginas no necesitan muchas fuentes, y solicitar muchas puede hacer que la carga sea lenta).

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

Si quieres saber qué estilos y grosores están disponibles para una fuente determinada, consulta la ficha de la fuente en Google Fonts.

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

Estilo 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 de Cantarell y negrita de Droid Serif, puedes usar cualquiera de las siguientes URLs:

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

Usar font-display

font-display te permite controlar lo que sucede cuando la fuente no está disponible. Por lo general, es adecuado especificar un valor distinto del auto predeterminado.

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

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

Especifica subconjuntos de secuencias de comandos

Algunas de las fuentes del directorio de fuentes de Google admiten varias secuencias de comandos (como el latín, el cirílico y el griego). Para especificar qué subconjuntos se deben descargar, el parámetro del subconjunto se debe adjuntar 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 debería ser la siguiente:

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

Para solicitar los 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 el navegador de un cliente admite el intervalo Unicode (http://caniuse.com/#feat=font-unicode-range), se ignora el parámetro del subconjunto y el navegador seleccionará entre los subconjuntos compatibles con la fuente a fin de obtener lo que necesita para renderizar 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 quieras usar una fuente web en tu sitio web o aplicación, sabrás de antemano 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 la URL de solicitud de fuente. Esto permite que Google muestre un archivo de fuente optimizado para tu solicitud. En algunos casos, esto puede reducir el tamaño del archivo de fuente hasta 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 colocarlo como valor de text=. Así se vería la solicitud:

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

Al igual que con todas las cadenas de consulta, debes codificar como URL el valor:

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

Esta función también funciona 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 visibles en tu sitio web, a menudo querrás estilizar el texto de forma decorativa. Para simplificar tu trabajo, Google proporcionó una colección de efectos de fuente que puedes usar con un esfuerzo mínimo para producir un texto visible atractivo. Por ejemplo:

Este es un efecto de fuente.

Para usar esta función beta, simplemente agrega effect= a tu solicitud a la API de Google Fonts y el nombre de clase correspondiente a los elementos HTML que quieres afectar. 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 la 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 de 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 y Safari
Señal de ladrillo brick-sign font-effect-brick-sign Chrome y Safari
Lienzo impreso canvas-print font-effect-canvas-print Chrome y Safari
Grafito crackle font-effect-crackle Chrome y Safari
Decaimiento decaying font-effect-decaying Chrome y Safari
Destrucción destruction font-effect-destruction Chrome y Safari
Angustiado distressed font-effect-distressed Chrome y Safari
Madera desgastada distressed-wood font-effect-distressed-wood Chrome y Safari
Emboses emboss font-effect-emboss Chrome, Firefox, Opera y Safari
Departamento de bomberos fire font-effect-fire Chrome, Firefox, Opera y Safari
Animación de fuego fire-animation font-effect-fire-animation Chrome, Firefox, Opera y Safari
Frágil fragile font-effect-fragile Chrome y Safari
Pasto grass font-effect-grass Chrome y Safari
Hielo ice font-effect-ice Chrome y Safari
Mitosis mitosis font-effect-mitosis Chrome y Safari
Neón neon font-effect-neon Chrome, Firefox, Opera y Safari
Contorno outline font-effect-outline Chrome, Firefox, Opera y Safari
Putting putting-green font-effect-putting-green Chrome y Safari
Acero con brazalete scuffed-steel font-effect-scuffed-steel Chrome y Safari
Sombra múltiple shadow-multiple font-effect-shadow-multiple Chrome, Firefox, Opera y Safari
Astillas splintered font-effect-splintered Chrome y Safari
Estática static font-effect-static Chrome y Safari
Lavado de piedra stonewash font-effect-stonewash Chrome y Safari
Tres dimensiones 3d font-effect-3d Chrome, Firefox, Opera y Safari
Flotador tridimensional 3d-float font-effect-3d-float Chrome, Firefox, Opera y Safari
Vintage vintage font-effect-vintage Chrome y Safari
Fondo de pantalla wallpaper font-effect-wallpaper Chrome y Safari

Hay muchas más formas de modificar el estilo de tus fuentes, y CSS permite muchas cosas. Solo te estamos proporcionando algunas ideas para comenzar. Para obtener más ideas, prueba la búsqueda de Google "efectos de texto CSS" y explora 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.
  • Obtén información sobre cómo usar el Web Font Loader para tener más control sobre la carga de fuentes.
  • Obtén más información sobre el funcionamiento de la API de Google Fonts en la página Consideraciones técnicas.