API para desarrolladores

La API de Developers da acceso a metadatos a todas las familias que usan Google Fonts. Permite que las apps consulten a Google Fonts para conocer las familias de fuentes disponibles. La API de REST proporciona datos en el formato JSON que incluye los estilos y secuencias de comandos (llamados subconjuntos en Google Fonts) en cada familia. La API puede ordenar la lista de familias alfabéticamente, por fecha de adición, por cantidad de estilos, por tendencia o por popularidad.

Público

Este documento está dirigido a desarrolladores web y de aplicaciones. El uso de la API de Developer requiere 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 tendría el siguiente aspecto:

{
 "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 en Google

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

Cómo obtener y usar una clave de API

Obtén una clave

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 la muestra anterior) se compone de un array llamado "items", que contiene objetos con información sobre cada familia de fuentes.

Un objeto familiar se compone de los siguientes campos:

  • tipo: El tipo de objeto, un objeto de fuente para sitios web
  • family: el nombre de la familia
  • subconjuntos: una lista de secuencias de comandos que admite la familia
  • menú: Una URL al subconjunto familiar que cubre solo el nombre de la familia.
  • variantes: Los diferentes estilos disponibles para la familia
  • version: la versión de la familia de fuentes
  • ejes: Rango de ejes, Presente solo a pedido(consulte a continuación) para fuentes variables
  • lastModified: Es la fecha (en formato "aaaa-MM-dd") que se modificó la familia de fuentes por última vez.
  • files: Son los archivos de la familia de fuentes (con todas las secuencias de comandos compatibles) para cada una de las variantes disponibles.

Cuando se combina la información de cada familia, es fácil crear una solicitud a la API de Fonts. Por ejemplo, si suponemos que tenemos una referencia al objeto familiar para un Pro anónimo:

[...]

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('');

[...]

Ordenamiento

De forma predeterminada, la lista de familias se muestra en ningún orden en particular. Sin embargo, es posible ordenar la lista con el parámetro de orden:

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

Estos son los posibles valores de clasificación:

  • alfa: ordenar la lista alfabéticamente
  • date: Ordena la lista por la fecha en que se agregó (la fuente más reciente se agregó o actualizó primero)
  • popularidad: ordenar la lista por popularidad (primero en la familia más popular)
  • style: Ordena la lista por la cantidad de estilos disponibles (la familia que tiene la mayoría de los estilos primero)
  • Tendencias: Ordena la lista por familias que observan un aumento en el uso (la familia que más registra primero el crecimiento).

Filtros

Consulta a 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

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 muestra una combinación de archivos de fuentes estáticas para las fuentes variables con instancias en posiciones estándar. Si se establece capaibility=VF, se muestra el archivo de fuente variable en lugar de los estáticos, junto con los metadatos de rango de ejes disponibles. Ejemplo de ejemplo:

https://www.googleapis.com/webfonts/v1/webfonts?capaibility=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
      }
    ]
  },
  [...]
 ]
}

Especificación de URL de API

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

your_key: Es tu clave de API de desarrollador.

family: Es el nombre de una familia de fuentes.

subset: Es el nombre de un subconjunto de fuentes.

capability: VF | WOFF2

sort: alpha | date | popularity | style | trending