Dynamically Load Google Fonts Into Opentype.js

[fweth]

Is there a good way to fetch Google fonts to use them with this library? I wrote the following function to get the URL:

function getFontUrl(familyName) {
  return fetch(`https://fonts.googleapis.com/css2?family=${familyName}&display=swap`)
    .then((rp) => rp.text())
    .then((txt) => txt.match(/ latin [^]*?url\((.*?)\)/)[1]);
}

but the result is still WOFF2, which isn't supported by opentype.js as far as I understand?

So I thought about sending a custom user agent with the fetch request, as Google appears to deliver the font files matching system compatibility? Anybody tried this?

[ILOVEPIE]

You can't specify user agent with fetch unless you're using node. I'd use the font download links. besides, google fonts alters the fonts in some ways.

[herrstrietzel]

I recently discovered @yne's comment describing a pretty neat workaround for parsing woff2in opentype.js:

You can employ a WASM build of fontello's waWoff2 library to decompress/recompile woff2 files to ttf.

I've created a little loading helper function to switch between woff2 preprocessing and natively supported woff/ttf/otf loading:

<script src="https://unpkg.com/[email protected]/build/compress_binding.js"></script>
<script>
/**
 * opentype.js helper
 * Based on @yne's comment
 * https://github.com/opentypejs/opentype.js/issues/183#issuecomment-1147228025
 * will decompress woff2 files
 */
async function loadFont(src) {
  let buffer = {};
  let font = {};
  let ext;
  // is file
  if (src instanceof Object) {
    // get file extension to skip woff2 decompression
    let filename = src[0].name.split(".");
    ext = filename[filename.length - 1];
    buffer = src[0].arrayBuffer();
  }
  // is url
  else {
    let url = src.split(".");
    ext = url[url.length - 1];
    let fetchedSrc = await fetch(src);
    buffer = await fetchedSrc.arrayBuffer();
  }
  font = await buffer;
  // decompress woff2
  if (ext === "woff2") {
    buffer = Uint8Array.from(Module.decompress(buffer)).buffer;
  }
  // parse font
  font = opentype.parse(buffer);
  return font;
}
</script>

Codepen example: load google fonts in opentype.js

[forresto]

With an API key, you can get a JSON listing of all of the fonts, with TTF links for each variant.

https://www.googleapis.com/webfonts/v1/webfonts?key=[YOUR_API_KEY]

{
  "kind": "webfonts#webfontList",
  "items": [
    {
      "family": "ABeeZee",
      "variants": [
        "regular",
        "italic"
      ],
      "subsets": [
        "latin",
        "latin-ext"
      ],
      "version": "v22",
      "lastModified": "2022-09-22",
      "files": {
        "regular": "https://fonts.gstatic.com/s/abeezee/v22/esDR31xSG-6AGleN6tKukbcHCpE.ttf", // Find the TTF here.
        "italic": "https://fonts.gstatic.com/s/abeezee/v22/esDT31xSG-6AGleN2tCklZUCGpG-GQ.ttf"
      },
      "category": "sans-serif",
      "kind": "webfonts#webfont",
      "menu": "https://fonts.gstatic.com/s/abeezee/v22/esDR31xSG-6AGleN2tOklQ.ttf"
    },
    //...