Se usó la API de Cloud Translation para traducir esta página.

API para desarrolladores

La API de Developer brinda acceso a los metadatos de todas las familias que ofrece Google Fonts. Permite que las apps consulten Google Fonts para conocer las familias de fuentes disponibles. La API de REST proporciona datos en formato JSON que incluyen los estilos y las secuencias de comandos (llamados subconjuntos en Google Fonts) de cada familia. La API puede ordenar la lista de familias alfabéticamente, por fecha de agregado, por cantidad de estilos, por tendencia o por popularidad.

Público

Este documento está dirigido a desarrolladores de aplicaciones y sitios web. Para usar la API de Developer, se requieren conocimientos de JavaScript.

Ejemplo rápido:

Para recuperar la lista dinámica de fuentes que ofrece el servicio de Google Fonts, envía la siguiente solicitud:

https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY

Una muestra del resultado se vería de la siguiente manera:

{
 "kind": "webfonts#webfontList",
 "items": [
  [...]
  {
    "family": "Anonymous Pro",
    "variants": [
      "regular",
      "italic",
      "700",
      "700italic"
    ],
    "subsets": [
      "cyrillic",
      "greek",
      "latin",
      "latin-ext"
    ],
    "version": "v21",
    "lastModified": "2022-09-22",
    "files": {
      "regular": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2Bp2a15UIB7Un-bOeISG3pLlw89CH98Ko.ttf",
      "italic": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2fp2a15UIB7Un-bOeISG3pHl428AP44Kqr2Q.ttf",
      "700": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2cp2a15UIB7Un-bOeISG3pFuAT0CnW7KOywKo.ttf",
      "700italic": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2ap2a15UIB7Un-bOeISG3pHl4OTCzc6IG30KqB9Q.ttf"
    },
    "category": "monospace",
    "kind": "webfonts#webfont",
    "menu": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2Bp2a15UIB7Un-bOeISG3pHl028A.ttf"
  },
  {
    "family": "Antic",
    "variants": [
      "regular"
    ],
    "subsets": [
      "latin"
    ],
    "version": "v19",
    "lastModified": "2022-09-22",
    "files": {
      "regular": "http://fonts.gstatic.com/s/antic/v19/TuGfUVB8XY5DRaZLodgzydtk.ttf"
    },
    "category": "sans-serif",
    "kind": "webfonts#webfont",
    "menu": "http://fonts.gstatic.com/s/antic/v19/TuGfUVB8XY5DRZZKq9w.ttf"
  },
  [...]
 ]
}

Cómo identificar tu aplicación ante Google

Tu aplicación debe identificarse cada vez que envíe una solicitud a la API de Google Fonts Developer. Para ello, debe incluir una clave de API en cada solicitud.

Adquiere y usa una clave de API

También puedes crear una en la página Credenciales.

Una vez que tienes una clave de API, puedes usar tu aplicación para adjuntar el parámetro de consulta key=yourAPIKey a todas las URL de solicitud.

La clave de API en las URL se incorpora de manera segura, por lo que no necesita codificación.

Detalles

La respuesta JSON (consulta el ejemplo anterior) se compone de un array llamado "items" que contiene objetos con información sobre cada familia de fuentes.

Un objeto de familia se compone de los siguientes campos:

kind: Es el tipo de objeto, un objeto de fuente web.
family: Es el nombre de la familia.
subsets: Es una lista de los segmentos admitidos por la familia.
menú: Es una URL del subconjunto de la familia que abarca solo el nombre de la familia.
variants: Los diferentes estilos disponibles para la familia
versión: Es la versión de la familia de fuentes.
ejes: Es el rango del eje. Solo está presente a pedido (consulta a continuación) para las fuentes variables.
lastModified: Es la fecha (formato "aaaa-MM-dd") en la que se modificó la familia de fuentes por última vez.
files: Son los archivos de la familia de fuentes (con todas las escrituras admitidas) para cada una de las variantes disponibles.
color_capabilities: Son los formatos de color, si los hay, que admite esta familia.
etiquetas: Son las etiquetas que se aplican en todo el espacio de diseño de esta familia. Solo está presente si se solicita (consulta a continuación).

Si combinas la información de cada familia, es fácil crear una solicitud a la API de Fonts. Por ejemplo, supongamos que tenemos una referencia al objeto de familia para Anonymous Pro:

[...]

var apiUrl = [];
apiUrl.push('https://fonts.googleapis.com/css?family=');
apiUrl.push(anonymousPro.family.replace(/ /g, '+'));
if (contains('italic', anonymousPro.variants)) {
  apiUrl.push(':');
  apiUrl.push('italic');
}
if (contains('greek', anonymousPro.subsets)) {
  apiUrl.push('&subset=');
  apiUrl.push('greek');
}

// url: 'https://fonts.googleapis.com/css?family=Anonymous+Pro:italic&subset=greek'
var url = apiUrl.join('');

[...]

Ordenar

De forma predeterminada, la lista de familias se devuelve sin un orden en particular. Sin embargo, es posible ordenar la lista con el parámetro de ordenamiento:

https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity

Los valores de ordenamiento posibles son los siguientes:

alpha: Ordena la lista alfabéticamente.
Fecha: Ordena la lista por fecha de adición (primero, la fuente más reciente agregada o actualizada).
Popularidad: Ordena la lista por popularidad (primero la familia más popular).
style: Ordena la lista por la cantidad de diseños disponibles (primero, la familia con más diseños).
Tendencias: Ordena la lista según las familias que experimentan un crecimiento en el uso (primero las familias que experimentan el mayor crecimiento).

Filtros

Consulta una familia específica

https://www.googleapis.com/webfonts/v1/webfonts?family=family_name

Todas las familias que admiten el subconjunto griego

https://www.googleapis.com/webfonts/v1/webfonts?subset=subset_name

Filtrar por categoría de fuente

https://www.googleapis.com/webfonts/v1/webfonts?category=category_name

Optimización

Para recuperar archivos de fuentes comprimidos en formato WOFF2

https://www.googleapis.com/webfonts/v1/webfonts?capability=WOFF2

Fuentes variables

Las fuentes variables ofrecen rangos continuos de estilos. De forma predeterminada, se devuelve una combinación de archivos de fuentes estáticas para las fuentes variables que se instancian en posiciones estándar. Si se establece capability=VF, se devuelve el archivo de fuente variable en lugar de los estáticos junto con los metadatos del rango de ejes disponibles. Ejemplo:

https://www.googleapis.com/webfonts/v1/webfonts?capability=VF

Respuesta de muestra:

{
 "kind": "webfonts#webfontList",
 "items": [
  [...]
  {
    "family": "Noto Sans Display",
    "variants": [
      "regular",
      "italic"
    ],
    "subsets": [
      "cyrillic",
      "cyrillic-ext",
      "greek",
      "greek-ext",
      "latin",
      "latin-ext",
      "vietnamese"
    ],
    "version": "v20",
    "lastModified": "2022-09-22",
    "files": {
      "regular": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLplK4fy6r6tOBEJg0IAKzqdFZVZxokvfn_BDLxR.ttf",
      "italic": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLpjK4fy6r6tOBEJg0IAKzqdFZVZxrktdHvjCaxRgew.ttf"
    },
    "category": "sans-serif",
    "kind": "webfonts#webfont",
    "menu": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLpbK4fy6r6tOBEJg0IAKzqdFZVZxpMkXJMhnB9XjO1o90LuV-PT4Doq_AKp_3cKZTCa3g.ttf",
    "axes": [
      {
        "tag": "wdth",
        "start": 62.5,
        "end": 100
      },
      {
        "tag": "wght",
        "start": 100,
        "end": 900
      }
    ]
  },
  [...]
 ]
}

Etiquetas

Si se establece capability=FAMILY_TAGS, el campo de etiquetas se propagará con todas las etiquetas que pertenecen a todo el espacio de diseño de la familia.

Ejemplo de muestra:

{
 "kind": "webfonts#webfontList",
 "items": [
  [...]
  {
    "family": "Noto Sans Display",
    "variants": [
      "regular",
      "italic"
    ],
    "subsets": [
      "cyrillic",
      "cyrillic-ext",
      "greek",
      "greek-ext",
      "latin",
      "latin-ext",
      "vietnamese"
    ],
    "version": "v20",
    "lastModified": "2022-09-22",
    "files": {
      "regular": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLplK4fy6r6tOBEJg0IAKzqdFZVZxokvfn_BDLxR.ttf",
      "italic": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLpjK4fy6r6tOBEJg0IAKzqdFZVZxrktdHvjCaxRgew.ttf"
    },
    "category": "sans-serif",
    "kind": "webfonts#webfont",
    "menu": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLpbK4fy6r6tOBEJg0IAKzqdFZVZxpMkXJMhnB9XjO1o90LuV-PT4Doq_AKp_3cKZTCa3g.ttf",
    "tags": [
      {
        "name": "/Expressive/Business",
        "weight": 58
      },
      {
        "tag": "/Sans/Humanist",
        "weight": 100,
      }
    ]
  },
  [...]
 ]
}

Especificación de la URL de la API

webfonts?key=<your_key>[&family=<family>][&subset=<subset>][&capability=<capability>...][&sort=<sort>]

your_key: Es tu clave de API para desarrolladores.

family: Nombre de una familia de fuentes.

subset: Nombre de un subconjunto de fuentes.

category: serif | sans-serif | monospace | display | handwriting

capability: VF | WOFF2.

sort: alpha | date | popularity | style | trending.

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