How can I load ttf-fontfiles using the Fetch API in Javascript?

Question

So I'm currently working on a Javascript-Game and want to load the necessary resources synchronously using the Fetch API. So loading images, sound files, scripts, and stylesheets are no problem. But as I'm loading files like CSS-files as a blob to include in the website, the fonts in these files, which are defined via the font-face-tag, aren't loaded. So is there any way around this problem, or do I have to include stylesheets the old way, to solve the problem, by just putting the link-tags in the head-block?

Here is an example of how I load CSS-files using the Fetch API:

fetch(filePath).then((r) => {
    return (r.blob());
}).then((content_) => {
    let sheetURL = URL.createObjectURL(content_);

    const element = document.createElement("link");
    element.rel = "stylesheet";
    element.type = "text/css";
    element.href = sheetURL;
    document.body.appendChild(element);
});

What this should essentially do, is to preload the file and then add it as a tag to the body:

As I said, the stylesheet with the content is loaded and used, but the fonts defined via the font-face tag are ignored.

user_7156819 · Answer

I found this API that allows you to download fonts: https://github.com/majodev/google-webfonts-helper#get-apifontsiddownloadzipsubsetslatinformatswoffwoff2variantsregular

First send a request to (e.g): "https://google-webfonts-helper.herokuapp.com/api/fonts/modern-antiqua?subsets=latin,latin-ext";

Then get the ttf url from the response as follows:

var json = JSON.parse(response);
const ttfFont = json.variants[0].ttf;

and send a new request to that URL.

How can I load ttf-fontfiles using the Fetch API in Javascript?

1 Answers