Add Google Fonts capability option

[mikachan]

This adds the Google Fonts capability option and sets it to WOFF2. This means the font assets that are downloaded will be WOFF2 instead of TTF.

This may be easier to review by looking at each commit, as the update to all the font files is making GH very slow 😅

• Most relevant change, adding the capability param: 29b2efa
• Some code quality tweaks: 38149ff
• The extremely large diff of all the font assets being updated and changed to WOFF2 files: 27ea8c7

Closes #1.

Testing Instructions

• Run npm run files
• The font assets that are downloaded should all be WOFF2 files

[pbking]

I can confirm that the files referenced are WOFF.

The other assets committed to the branch still seem to be ttf though, and I'm not sure why. What I get locally is woff resources, so the change is right. I'm just not sure why I see some of the resources I do.

I'm still running the scripts (it takes a while) so maybe I'll know more when it's done.

[luminuu]

The generation of the google-fonts.json file runs correctly for me and replaces the .ttf file URLs with .woff2 file URLs.

However running npm run files causes errors, as the JSON files differ in their setup. A font family in the 16.7 (old) version:

{
  "name": "ABeeZee",
  "fontFamily": "ABeeZee, sans-serif",
  "slug": "abeezee",
  "category": "sans-serif",
  "fontFace": [
    {
      "src": "https://fonts.gstatic.com/s/abeezee/v22/esDR31xSG-6AGleN6tKukbcHCpE.ttf",
      "fontWeight": "400",
      "fontStyle": "normal",
      "fontFamily": "ABeeZee"
    },
    {
      "src": "https://fonts.gstatic.com/s/abeezee/v22/esDT31xSG-6AGleN2tCklZUCGpG-GQ.ttf",
      "fontWeight": "400",
      "fontStyle": "italic",
      "fontFamily": "ABeeZee"
    }
  ]
},

In the new version (17.6) it's slightly different:

{
  "font_family_settings": {
    "name": "ABeeZee",
    "fontFamily": "ABeeZee, sans-serif",
    "slug": "abeezee",
    "fontFace": [
      {
        "src": "https://fonts.gstatic.com/s/abeezee/v22/esDR31xSG-6AGleN6teukbcHCpE.woff2",
        "fontWeight": "400",
        "fontStyle": "normal",
        "fontFamily": "ABeeZee"
      },
      {
        "src": "https://fonts.gstatic.com/s/abeezee/v22/esDT31xSG-6AGleN2tCkkJUCGpG-GQ.woff2",
        "fontWeight": "400",
        "fontStyle": "italic",
        "fontFamily": "ABeeZee"
      }
    ]
  },
  "categories": [
    "sans-serif"
  ]
},

The following lines or variables have to change:

google-fonts-to-wordpress-collection/src/download_google_font_assets.js

Line 17 in 673a2e0

return googleFonts.fontFamilies;

to return googleFonts.font_families

google-fonts-to-wordpress-collection/src/download_google_font_assets.js

Line 49 in 673a2e0

console.info(`ℹ️ Downloading ${families[i].name} (${i + 1}/${families.length})`);

to ${families[i].font_family_settings.name}

google-fonts-to-wordpress-collection/src/download_google_font_assets.js

Line 50 in 673a2e0

for (let x = 0; x < families[i].fontFace.length; x++) {

to families[i].font_family_settings.fontFace.length

google-fonts-to-wordpress-collection/src/download_google_font_assets.js

Line 53 in 673a2e0

const url = families[i].fontFace[x]['src'];

to const url = families[i].font_family_settings.fontFace[x]['src'];

With these changes, the font files get downloaded correctly as woff2 files.

[mikachan]

Thanks @luminuu! You're right, looks like download_google_font_assets.js and generate_font_previews.js both needed to be updated to use the new schema. I've updated these in 49cb832.

[mikachan]

I'm seeing the following errors when generating the SVG previews: Error generating preview for Zilla Slab Highlight 700 normal: Error: Unsupported OpenType signature wOF2

It looks like the library we're using, text-to-svg, doesn't support WOFF files. There's a similar discussion here: opentypejs/opentype.js#360. Maybe we should provide a list of TTF files for the previews to be generated from, and provide a list of WOFF files for the font assets themselves.

Edit: I've spoken to @matiasbenedetto, and we discussed that we don't need to update the previews now and they're also only ever generated in this repo. So we can leave the preview file as it is for now, and handle the above error from text-to-svg in a follow-up.

[matiasbenedetto]

I think we should avoid committing all the font files (WOFF or ttf) to the repo because we are not tracking changes on it, and they are making the repo big and difficult to handle (Github and vs. code PR previews not working) without a good reason. I think that previously, we were considering hosting the font assets ourselves for the font collection, and because of that, we persisted in the repo, but that's no longer true, so we can remove them.

Could you please remove the WOFF2 font assets from the PR so we can merge it?

I submitted a PR removing the existing TFF files from the repo: #5

[mikachan]

Could you please remove the WOFF2 font assets from the PR so we can merge it?

I agree! Thanks for confirming, I'll remove the new files from this PR once #5 is merged.

[matiasbenedetto]

I'll remove the new files from this PR once #5 is merged.

👍 Ready!

[mikachan]

I've updated this PR by removing font-assets. I also double-checked that the google-fonts.json is still up to date by running npm run api again. This is ready for another review, thanks!

[matiasbenedetto]

LGTM