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 tu sitio web páginas. No necesitas programar. todo lo que debes hacer es agregar a tu documento HTML y, luego, consulta 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, abre el archivo en un navegador web moderno. Deberías ver una página con la siguiente, en la fuente llamada Tangerine:

¡Una Web hermosa!

Esa oración es un texto común, por lo que puedes cambiar su apariencia con CSS. Probar agregando una sombra al estilo en el ejemplo anterior:

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

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

¡Una Web hermosa!

Y ese 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 a la hoja de estilo para solicitar las fuentes web que quieras: 

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

  2. Aplica estilo 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 diseño intercalado en el elemento: 

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

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

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

Para determinar qué URL usar en el vínculo de tu hoja de estilo, comienza con el vínculo URL base de la API de Fonts:

https://fonts.googleapis.com/css

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

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 Mandarina, Inconsolata y Droid Sans:

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

La solicitud de varias fuentes te permite utilizar todas ellas en tu página. (pero no te excedas; la mayoría de las páginas no necesitan muchas fuentes y solicitan un muchas fuentes pueden hacer que la carga de las páginas sea lenta).

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

Por ejemplo:

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

Para saber qué estilos y grosores están disponibles para una fuente determinada, consulta la lista de fuentes en Google Fonts.

Para cada estilo que solicites, puedes proporcionar el nombre completo o una abreviación; Para las ponderaciones, de manera alternativa, puedes especificar una ponderación numérica:

Estilo Especificadores
cursiva italic o i
negrita bold o b o una ponderación numérica, como 700
negrita y cursiva bolditalic o bi

Por ejemplo, para solicitar caracteres Cantarell en cursiva y Droid Serif en negrita, puedes usar cualquier 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

Cómo usar la visualización de fuentes

font-display te permite controlar lo que sucede cuando la fuente no está disponible. Especificar otro valor que el valor predeterminado auto suele ser apropiado.

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 varios alfabetos (por ejemplo, el latín, el cirílico y el griego). En orden para especificar qué subconjuntos deben descargarse, se adjunta a la URL.

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

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

Para solicitar el subconjunto griego del Roboto Mono, la URL sería ser:

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

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

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 del cliente admite el rango Unicode (http://caniuse.com/#feat=font-unicode-range) se ignora el parámetro del subconjunto; el navegador seleccionará de los subconjuntos compatible con la fuente para 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 deseas usar una fuente web en tu sitio web o aplicación, sabrás de antemano qué letras necesitarás. Esto suele ocurrir cuando usas un fuente web en un logotipo o encabezado.

En estos casos, debes considerar especificar un valor text= en tu fuente. la URL de la solicitud. Esto permite que Google muestre un archivo de fuente optimizado para tu para cada 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. Para Por ejemplo, si solo usas Inconsolata para el título de tu blog, puedes ingresar el título como el valor de text=. Así es como se vería la solicitud como:

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 con fuentes internacionales, lo que te permite especificar el formato UTF-8 caracteres. Por ejemplo, ¡Hello! se representa de la siguiente manera:

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

Cómo habilitar efectos de fuente (beta)

Al crear encabezados o mostrar texto en tu sitio web, darle al texto un estilo decorativo. Para simplificar tu trabajo, Google tiene te proporcionó una colección de efectos de fuente que puedes usar con un mínimo esfuerzo para para producir un texto de visualización atractivo. Por ejemplo:

Este es un efecto de fuente.

Para usar esta función beta, simplemente agrega effect= a Google Fonts solicitud a la API y agregar el nombre de clase correspondiente a los elementos HTML que queremos afectar. En nuestro ejemplo anterior, usamos el efecto de fuente shadow-multiple. 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 el nombre de clase correspondiente siempre es el nombre del efecto con el prefijo font-effect-, por lo que el nombre de 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 separando los nombres de los efectos con una canalización carácter (|).

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

A continuación, se muestra 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
Crujido crackle font-effect-crackle Chrome y Safari
En deterioro decaying font-effect-decaying Chrome y Safari
Destrucción destruction font-effect-destruction Chrome y Safari
Estrés distressed font-effect-distressed Chrome y Safari
madera desgastada distressed-wood font-effect-distressed-wood Chrome y Safari
Emboss emboss font-effect-emboss Chrome, Firefox, Opera y Safari
Fuego 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 Green putting-green font-effect-putting-green Chrome y Safari
Acero pulido scuffed-steel font-effect-scuffed-steel Chrome y Safari
Shadow multiple shadow-multiple font-effect-shadow-multiple Chrome, Firefox, Opera y Safari
Rotado splintered font-effect-splintered Chrome y Safari
Estática static font-effect-static Chrome y Safari
Stonewash stonewash font-effect-stonewash Chrome y Safari
Tres dimensiones 3d font-effect-3d Chrome, Firefox, Opera y Safari
Número de punto flotante 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

Existen muchas otras formas de aplicar estilos a las fuentes y es posible realizar muchas acciones a través de CSS. Solo te brindamos algunas ideas para que comiences. Para ver más ideas, prueba con la búsqueda de Google "efectos de texto CSS" y navega por 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 obtener 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 Consideraciones técnicas.