Some Fonts Can't Be Loaded, Despite Being Valid Requests

[Jay Bats]

I'm using the latest Chrome browser.

Two examples of fonts that always fire the 'fontinactive' event:

Do Hyeon
Nanum Gothic

I can see in my network tab that the above requests are made and they return status 200.

Even with really high timeouts, these fonts won't load. Why not?

This is kind of a hassle, because now I have to dig through the list of font faces to find out which ones will successfully load, before I can offer them to my users in a combobox.

[Jay Bats]

I've just found out that these fonts are successfully applied, even when WebFontLoader's inactive event is fired.

On these requests, the link element is successfully added to the head section of the page. The network tab, however, shows that the corresponding woff file isn't loaded.

Because fonts still work when the inactive event fires, I can simply apply the font-family styling to my desired p-tag on this fail event. The problem with that, is that it doesn't fire until the timeout is reached.

Would be nice if this problem could be fixed!

[Jay Bats]

Just downloaded the google fonts from their github. It seems they are only serving .ttf files nowadays. Web font loader is still requesting .woff2 files. For backwards compatibility, google fonts allows this. But it would rather see web font loader request .ttf files, I think. This could be the cause.

Also, for a small set of fonts that could not be loaded, there will be a http status code of 400:

Buda
Coda Caption
Molle
Open Sans Condensed
Sunflower
UnifrakturCook

Take for example Molle, which won't work for a request with family name "Molle". But it will work just fine for "Molle:400i".

You can't even find the "Molle:400i" tidbit in the google font api request for requesting all fonts.

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

Afaik, you can only get the "Molle:400i" tidbit if you select the font on their google fonts site interface and then attempt to download it. This implies you can never automate all google font retrieval entirely programmatically: some manual corrections will be required in the data you collect.

All in all, for the hundreds of fonts that google offers, I'm having trouble with a few dozen of them: the above 6 are http status 400, a few dozen others will fire 'inactive' but are loaded successfully and can be applied on the inactive timeout.

It's too bad this google font stuff is working fairly well, but not quite as well as you'd like to.

[a-mean-blogger]

This issue looks like it's related to unicode-range in css.

I guess font is loaded correctly but WebFont can not validate the loading because of unicode-range.

If you remove unicode-range part from https://fonts.googleapis.com/css?family=Nanum+Gothic, save it as a local css and custom load the local css with WebFont, it works.

WebFont.load({
custom: {
families: ['Nanum Gothic'],
urls: ['https://fonts.googleapis.com/css?family=Nanum+Gothic']
},
inactive: function() {
WebFont.load({
custom: {
families: ['Nanum Gothic'],
urls: ['https://fonts.googleapis.com/css?family=Nanum+Gothic&text=abc']
},
active: function() {console.log("active")},
});
},
});

This is work around for now...
https://fonts.googleapis.com/css?family=Nanum+Gothic**&text=abc** does not have unicode-range, so it fires the active event.

[Jay Bats]

Thanks for your input. How did you find out about the unicode range... experimentation?

Anyhoo, I've decided to go with FontFaceObserver instead. It requires @font-faces to be on the page. So I simply load those by adding link tags to the page head. The link tag's load event then fires the FontFaceLoader load function, which retrieves the binary. Now I don't have to save css for hundreds of fonts I want to offer my users.

I have run many automated tests, dynamically loading hundreds of fonts, using both WebFontLoader and FontFaceObserver. I've found FontFaceObserver's performance to be more reliable. It consistently craps out on all the same fonts (those containing : in their family name and fonts with non-western characters). Totally predictable... I can simply remove those fonts from my list.

WebFontLoader craps out on random fonts with every run.

FontFaceObserver also gives me more control, since it will let me determine which @font-faces end up on the page. It will simply load the binary it finds in there.