User agents and font formats

[timwhitlock]

I have no idea if this is against the API terms of use, but if you were considering expanding your script to download other formats, you might try sending alternative user agent strings to the CSS end point.

I've tested a bunch of browsers and note the following font types are generated:

.woff2
Modern browser user agents produce this (as you are doing already).

.woff
Edge version < 14, e.g:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10240

.eot (embedded-opentype)
Ancient Internet Explorer, e.g:
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)

.ttf (truetype)
Seems to be the default.

Then presuming you had all these formats, you could generate a rule like this:

@font-face {
  font-family: "Name";
  src:url("font.eot");
  src:url("font.eot#iefix") format('embedded-opentype'),
      url("font.woff2") format("woff2"),
      url("font.woff") format("woff"),
      url("font.ttf") format("truetype");
}

[IonicaBizau]

Ah, interesting...

I hope it's not against their terms—it's really just simulating the browser downloading the css stuff and fonts.

Currently the Google Chrome user agent is used, but I'm open for accepting contributions. I'm not quite sure how we will merge the results for different agents.

[timwhitlock]

Yeh, it's only doing what a browser does, but this is Google we're talking about.

I would have sent a pull request, but my Node skills are some years out of date and didn't have the time.

Also, IE is dead, and woff2 is almost universal :)

[IonicaBizau]

Will leave this issue opened and see what other people think... Honestly I'm not really familiar how different browsers support the fonts. Is there a page where we could see that (how one would have to load for different browsers)?

Also, by using the current user agent (which is currently hardcoded), what browsers should fail to display the fonts?

[timwhitlock]

Compatibility table here: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face#Browser_compatibility

In all honesty I use the fallbacks as a matter of standard practice and rarely check the state of this table. I think the only real issue with woff2 compatibility is IE if you need to support it. People with Chrome and FF most likely have recent versions.

[IonicaBizau]

Oh, I see! Maybe using a different user agent to request woff instead of woff2 would be better then. I'm just wondering what would be the disadvantages when using woff instead of woff2...?

[timwhitlock]

In my (very isolated) use case, the woff2 file is much smaller.

I'd hold off and see if anyone else requests it. I was just letting you know, because I had gone and pulled down my font in all the formats just for completeness.

[IonicaBizau]

Well, in my case, I need IE11 support anyways... (for a specific company)

Anyways, will see next week. 😁

[rosswintle]

Hi! I just came across this very thing. I used your font downloader but it only got the woff2's and soon people on IE11 were complaining.

You can simulate the difference in Chrome by setting a user agent in the dev tools "console drawer". See this video:

https://cl.ly/3D2a2L2r0227

There's good info about cross-browser font-face usage here: https://css-tricks.com/snippets/css/using-font-face/

Shouldn't be too much work to piece it together from here.

At the very least you should declare the browser support for what you download.

Thanks for the cool script though! Really nice.

[rosswintle]

Ah. Just noticed that the differences are too great to do a simple addition of a file to a line. I'm getting unicode ranges with my WOFF2's and not with my WOFF's. Maybe not so easy!

[DanielRuf]

This is not against the terms.
We need woff and woff2, other file formats are not needed.

See
https://google-webfonts-helper.herokuapp.com/fonts
https://github.com/DanielRuf/google-webfonts-downloader/blob/master/index.js
https://github.com/majodev/google-webfonts-helper#get-apifontsiddownloadzipsubsetslatinformatswoffwoff2variantsregular

[DanielRuf]

Also see https://caniuse.com/#search=woff