Interfejs API dla programistów

Interfejs Developer API zapewnia dostęp do metadanych wszystkich rodzin czcionek dostępnych w Google Fonts. Umożliwia aplikacjom wysyłanie zapytań do Czcionek Google o dostępne rodziny czcionek. Interfejs REST API udostępnia dane w formacie JSON, które zawierają style i skrypty (nazywane w Google Fonts podzbiorami) w każdej rodzinie. Interfejs API może sortować listę rodzin czcionek alfabetycznie, według daty dodania, liczby stylów, trendu lub popularności.

Odbiorcy

Ten dokument jest przeznaczony dla programistów aplikacji internetowych i mobilnych. Korzystanie z interfejsu Developer API wymaga znajomości języka JavaScript.

Krótki przykład

Aby pobrać dynamiczną listę czcionek oferowanych przez usługę Google Fonts, wyślij to żądanie:

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

Przykładowy wynik może wyglądać tak:

{
 "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"
  },
  [...]
 ]
}

Identyfikowanie aplikacji w Google

Za każdym razem, gdy aplikacja wysyła żądanie do interfejsu Google Fonts Developer API, musi się identyfikować, dołączając do każdego żądania klucz interfejsu API.

Uzyskiwanie i używanie klucza interfejsu API

Zamów klucz

Możesz też utworzyć go na stronie Dane logowania.

Gdy uzyskasz klucz interfejsu API, Twoja aplikacja będzie mogła dołączać parametr zapytania key=yourAPIKey do adresów URL wszystkich żądań.

Klucz interfejsu API można bezpiecznie umieszczać w adresach URL, więc nie trzeba go kodować.

Szczegóły

Odpowiedź JSON (patrz przykładowy kod powyżej) składa się z tablicy o nazwie „items”, która zawiera obiekty z informacjami o każdej rodzinie czcionek.

Obiekt rodziny składa się z tych pól:

  • kind: rodzaj obiektu, obiekt czcionki internetowej;
  • family: nazwa rodziny,
  • subsets: lista skryptów obsługiwanych przez rodzinę.
  • menu: adres URL podzbioru rodziny obejmujący tylko nazwę rodziny.
  • warianty: różne style dostępne w rodzinie;
  • version: wersja rodziny czcionek.
  • axes: zakres osi, dostępny tylko na żądanie (patrz poniżej) w przypadku czcionek zmiennych;
  • lastModified: data (w formacie „rrrr-MM-dd”) ostatniej modyfikacji rodziny czcionek.
  • pliki: pliki rodziny czcionek (ze wszystkimi obsługiwanymi skryptami) dla każdego z dostępnych wariantów;
  • color_capabilities: formaty kolorów obsługiwane przez tę rodzinę (jeśli takie są).
  • tagi: tagi, które mają zastosowanie w całej przestrzeni projektowej tej rodziny. Prezentacja tylko na żądanie (patrz poniżej).

Łącząc informacje o poszczególnych rodzinach, możesz łatwo utworzyć żądanie interfejsu Fonts API. Załóżmy na przykład, że mamy odwołanie do obiektu rodziny dla 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('');

[...]

Sortowanie

Lista rodzin jest domyślnie zwracana w przypadkowej kolejności. Listę można jednak posortować za pomocą parametru sortowania:

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

Możliwe wartości sortowania:

  • alpha: Sortowanie listy alfabetycznie
  • data: posortuj listę według daty dodania (najpierw najnowsze czcionki dodane lub zaktualizowane);
  • popularność: sortuje listę według popularności (najpopularniejsze rodziny na początku);
  • styl: posortuj listę według liczby dostępnych stylów (rodzina z największą liczbą stylów na początku);
  • popularne: sortuj listę według rodzin, w których nastąpił wzrost wykorzystania (na początku rodziny, w których nastąpił największy wzrost);

Filtrowanie

Wysyłanie zapytań dotyczących konkretnej rodziny

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

Wszystkie rodziny obsługujące podzbiór grecki

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

Filtrowanie według kategorii czcionek

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

Optymalizacja

Pobieranie plików czcionek skompresowanych w formacie woff2

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

Czcionki zmienne

Czcionki zmienne oferują ciągłe zakresy stylów. Domyślnie w przypadku czcionek zmiennych utworzonych w standardowych pozycjach zwracana jest kombinacja statycznych plików czcionek. Jeśli parametr capability=VF jest ustawiony, zwracany jest plik czcionki zmiennej zamiast statycznych wraz z metadanymi dostępnego zakresu osi. Przykład:

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

Przykładowa odpowiedź:

{
 "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
      }
    ]
  },
  [...]
 ]
}

Tagi

Jeśli ustawiona jest wartość capability=FAMILY_TAGS, pole tagów zostanie wypełnione wszystkimi tagami, które odnoszą się do całej przestrzeni projektowej rodziny.

Przykładowy przykład:

{
 "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,
      }
    ]
  },
  [...]
 ]
}

Specyfikacja adresu URL interfejsu API

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

your_key: Twój klucz interfejsu API dla programistów.

family: nazwa rodziny czcionek.

subset: Nazwa podzbioru czcionki.

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

capability: VF | WOFF2.

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