search

majodev / google-webfonts-helper

A Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files + CSS snippets
https://gwfh.mranftl.com
MIT License
12.03k stars 421 forks source link

What's the reasoning behind .woff2 font files being fetched using a Mac User-Agent string? #5

Closed zytzagoo closed 8 years ago

zytzagoo commented 9 years ago

Asking because that appears to be the reason why text set in Open Sans looks "less nice" on Windows in recent Chrome/Opera versions (when served local font files fetched using google-webfonts-helper).

The same page/site's text is rendered differently if/when google-hosted font assets are requested.

Here's a GIF in hopes of getting the message across easier: open-sans-local-vs-google-visual-diff

Focus on characters/words on the dark background as the GIF frame changes and you'll hopefully start spotting the differences.

P.S. Thanks for building this great tool and for all the work you've put into it so far!

lboecker commented 9 years ago

Do you mean local(...) vs. url(...)? They render differently sometimes -- no idea why. The actual font files should be the same. You can verify this yourself by changing your user agent and download the stylesheet Google provides. If the links to the fonts are the same, the files should be as well.

zytzagoo commented 9 years ago

Noup, I meant the UAs used to fetch the font files from google (defined here: https://github.com/majodev/google-webfonts-helper/blob/master/server/logic/conf.js)

After looking into it some more I've concluded that the end result doesn't justify the effort (end result being identical renderings as though the font files were served from Google across all the browsers/OSes).

One would have to re-implement the entire server-side logic (browser/os detection + asset serving) on their own servers. That's required in order to be able to serve each possible combination of browser/os/font-weight/subset (at least, it could be more), as that's what Google appears to be doing now. And one would have to fetch all those combinations from Google before that (using google-webfonts-helper or other means).

A lot of work for something that a lot of people probably wouldn't even notice :)

lboecker commented 9 years ago

So Google serves different font files for different UAs? For example, 2 different WOFF2 files?

zytzagoo commented 9 years ago

Yep: https://news.ycombinator.com/item?id=8802748

majodev commented 9 years ago

Hi, First of all, I'm really sorry to reply THAT late. :(

It's exactly as @zytzagoo has already pointed out, so sadly there is no easy way to provide different font files for each UA.

I'll try to add the woff2 files for Windows UAs in the next version, so you can pick the other UA if you like. Hope this helps, if anyone come across a complete solution (or perhaps a JS-only-solution?), please let me/us know here.

lboecker commented 9 years ago

Did you ever find out what's different between to two files? In the hacker news thread somebody mentioned they just strip the hinting, which should be fine, but I'd like to know for sure nothing else is missing.

majodev commented 9 years ago

@superlukas I still haven't analyzed that and I've no further information regarding what is exactly different between those font files. The gif by @zytzagoo however indicates that Google does more than stripping the hinting on Windows UAs...

zytzagoo commented 9 years ago

It could very well be due to lack of hinting (if it's indeed stripped for non-windows UAs as the HN commenter states).

Unfortunately, I haven't had the time to test it properly.

The GIF shows the differences between a locally-hosted .woff2 Open Sans (gotten via google-webfonts-helper using a Mac UA string) and a google-hosted one (for which the browser sent a Windows UA string).

While looking at hinted and non-hinted renderings on http://en.wikipedia.org/wiki/Font_hinting (http://en.wikipedia.org/wiki/File:Font-hinting-example.png) I felt it's kind of the same thing (although much less noticeable on smaller font sizes, as is the case in the GIF).

If it's true that (only?) hinting is stripped for non-windows versions, then it could very well explain the visual differences -- the browser rendered the "mac" version on Windows (stripped of hinting info).

I haven't been able to fully confirm the stripping information, but I did find this: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=en#reducing-font-size-with-compression

Finally, it is worth noting that some font formats contain additional metadata, such as font hinting and kerning information that may not be necessary on some platforms, which allows for further filesize optimization. Consult your font compressor for available optimization options, and if you take this route, ensure that you have the appropriate infrastructure to test and deliver these optimized fonts to each particular browser - e.g. Google Fonts maintains 30+ optimized variants for each font and automatically detects and delivers the optimal variant for each platform and browser.

(emphasis mine)

Since there are no differences between horizontal glyph positions in the GIF I guess that rules out kerning as a factor? Which leaves only hinting and/or something else that might affect antialiasing/subpixel-rendering... Maybe even my ClearType settings? (which is just a huge Platform/UA/Version detection matrix... based on the way https://github.com/bramstein/trmix works)

lboecker commented 9 years ago

I just found out that Font Squirrel's webfont generator has an option called "fix GASP table." I don't know what that means, but the description reads "better DirectWrite rendering," which sounds like a Windows thing and might be worth looking at. Unfortunately I don't have access to a Windows machine right now, so I can't test what it does. I just want to let you guys know that's a thing.

Cheers