Discovery to look into best way to handle Google Fonts and TypeKit.

[MackenzieHartung]

Note: this is specific to Google Fonts and TypeKit and does not include custom fonts.

[miina]

On Google Fonts:
There was discussion previously about needing an API key for being able to get the Google Fonts.

An alternative could be storing the font data statically and pulling it from a .json file for example, instead of using the API directly every time. This would mean that the list wouldn't always necessarily include all the fonts though and we'd have to update it when we release a new version.

Thoughts? cc @swissspidy @kienstra

[westonruter]

I like the idea of pulling down all Google Fonts data as part of a plugin build process. That way we only need the API key as part of our tooling and we don't need to do live requests out to Google Fonts to get the data.

Then again, getting all the data in a single JSON file could be expensive since there is so much. It's not clear to me if the API key is bound to one domain. If not, then could the same key be used by hundreds of thousands of sites?

[swissspidy]

The complete webfont list as retrieved from https://developers.google.com/fonts/docs/developer_api is about 512KB in size, with ~20k lines. I saw some plugins that had a custom version with only half the size though.

If not, then could the same key be used by hundreds of thousands of sites?

Not really, as requests will be rate-limited. IIRC the limit is 10000 API calls per day per API key.

I just looked at a few WordPress plugins that support Google Fonts and saw different types of usage.

1. There is a limited set of fonts to choose from.
2. You can choose any font from Google Fonts from a hardcoded list
3. There is a hardcoded list, but you can enter your own API key to get a more up-to-date one.

I even found a plugin with a hardcoded API key and an FAQ entry that recommended users to edit the plugin file to enter their own API key in case they hit the rate limited.

So my suggestion would be to go with a hardcoded list in a JSON file.

---

On Typekit / Adobe Fonts:

This is a bit of a different story. It's a paid service where you create your kit / project on their site that includes a set of fonts.

With a given project ID you can then open https://typekit.com/api/v1/json/kits/123456/published to retrieve a JSON result like this:

{
  "kit": {
    "id": "123456",
    "families": [
      {
        "id": "mtyl",
        "name": "Proxima Nova Condensed",
        "slug": "proxima-nova-condensed",
        "css_names": [
          "proxima-nova-condensed"
        ],
        "css_stack": "\"proxima-nova-condensed\",sans-serif",
        "variations": [
          "n4",
          "i4",
          "n6",
          "i6",
          "n7",
          "i7"
        ]
      },
      {
        "id": "vcsm",
        "name": "Proxima Nova",
        "slug": "proxima-nova",
        "css_names": [
          "proxima-nova"
        ],
        "css_stack": "\"proxima-nova\",sans-serif",
        "variations": [
          "n4",
          "i4",
          "n7",
          "i7"
        ]
      }
    ]
  }
}

Seems rather easy to retrieve & cache.

Although I am wondering whether it wouldn't be even easier to just delegate this to a dedicated plugin like https://wordpress.org/plugins/custom-typekit-fonts/.

Of course the same could be thought about Google Fonts as well.

---

Editor Integration:

Once we have settled how we load the fonts, we need to figure out how we present these in the editor. Right now we have a WYSIWYG-dropdown for all the fonts, with the previews made possible by pre-generated SVGs. This has been done for performance reasons, as otherwise we would load a gazillion stylesheets just for this purpose.

How can we continue having these nice previews? I assume we'd have to create SVGs of the Google Fonts as part of the build process (https://github.com/danmarshall/google-font-to-svg-path might serve as inspiration).

For Typekit, we'd have to load the stylesheets either way. However, when you configure your Typekit project, we can definitely assume that you'd want to use those fonts in your stories, so we can preload these no matter what.

[miina]

Once we have settled how we load the fonts, we need to figure out how we present these in the editor.

Probably would also be good to have search functionality in the dropdown.

Creating SVGs makes sense to me. An alternative could also be lazyloading the fonts while scrolling in the dropdown/searching a font. This way we wouldn't load all the stylesheets by default but would still get the actual preview.

[swissspidy]

Probably would also be good to have search functionality in the dropdown.

Yes, I kinda assumed that we would add such an autocomplete functionality. Can't really display a dropdown with hundreds of fonts.

An alternative could also be lazyloading the fonts while scrolling in the dropdown/searching a font.

We'd have to test how well that works. But even when it works well, there's way less HTTP overhead with inlined SVGs.

[swissspidy]

Will summarize this later today.

[swissspidy]

Actually, I wanna hear your opinion on Typekit integration first.

Since, other than Google Fonts, Typekit would require having a settings field for the project ID, I wonder whether we should add this ourselves or instead make sure integration with existing Typekit plugins works.

Thoughts?

[miina]

I'm not sure. In a way using existing solutions does make sense. It's not necessarily a main focus of the AMP Plugin, maybe bloating the plugin code with this kind of add-ons that can be used but likely most of the users actually would not use, would be better integrated instead.

If the integration is acceptable and too much effort doesn't have to go into integrating then this is perhaps more reasonable. If there's something missing from the Typekit plugin side then perhaps we could reach out to the plugin author(s) as well, seems to be active.

WDYT?

[swissspidy]

If the integration is acceptable and too much effort doesn't have to go into integrating then this is perhaps more reasonable. If there's something missing from the Typekit plugin side then perhaps we could reach out to the plugin author(s) as well, seems to be active.

+1

[swissspidy]

Created new issues for implementation:

• Font Picker: Bundle list of Google Fonts #3026
• Font Picker: Use searchable dropdown #3027
• Font Picker: Generate preview SVGs for Google Fonts #3028
• Font Picker: Integrate fonts from Typekit plugins #3029