4 ms·

Be aware that Google Fonts will adapt the fonts and the CSS specification depending on the browser and OS. Swapping Google fonts with self hosted files might r

Be aware that Google Fonts will adapt the fonts and the CSS specification depending on the browser and OS. Swapping Google fonts with self hosted files might result in slightly different rendering. Not sure how big the differences are today, but a few years ago the differences have been visible even for some common browser/OS combos.

Ciantic 5y ago
These days though having single woff2 file goes far enough. I have noticed that these auto-optimizing fonts are usually more headache than worth it. E.g. many time fonts from Adobe's TypeKit has different baseline in Google Chrome and Safari, it's maddening when it happens because one can't vertically place the fonts in the buttons in that case.
- CSSer 5y ago
  Even worse than what you mentioned, they sometimes update the fonts and refuse to offer any way to version lock them. Really. Check out this issue for more details: https://github.com/google/fonts/issues/1307 https://github.com/google/fonts/issues/1307. It's all a lot of magic for very little gain.
- innocenat 5y ago
  It's depend. For CJK fonts you don't want single big .woff2, you want to subset each font to smaller subset of characters, which Google Font does automatically.
asadkn 5y ago
The difference isn't as much as it used to be in terms of file-size optimization as woff2 is pretty much supported by all browsers and you don't have to serve anything else now. Except for CJK and Arabic fonts, which have to be split or their woff2 size would be a few MB - this is Progressive Font Enrichment [1]. However, once distinction is font hinting data [2]. Google Fonts serve different files based for Windows vs Mac. The windows variations have hinting included. [1]: https://rwt.io/typography-tips/progressive-font-enrichment-reinventing-web-font-performance https://rwt.io/typography-tips/progressive-font-enrichment-r... [2]: https://www.typotheque.com/articles/hinting https://www.typotheque.com/articles/hinting
WorldMaker 5y ago
This site does seem aware of that and offers CSS options based on what are probably the two most common CSS returns from Google: a "Best Support" option that includes a number of legacy formats and "Modern Browsers" option that merely gives the browser a choice between WOFF and WOFF2, based on if they support WOFF2 or not.

Ciantic 5y ago

These days though having single woff2 file goes far enough. I have noticed that these auto-optimizing fonts are usually more headache than worth it. E.g. many time fonts from Adobe's TypeKit has different baseline in Google Chrome and Safari, it's maddening when it happens because one can't vertically place the fonts in the buttons in that case.

CSSer 5y ago
Even worse than what you mentioned, they sometimes update the fonts and refuse to offer any way to version lock them. Really. Check out this issue for more details: https://github.com/google/fonts/issues/1307 https://github.com/google/fonts/issues/1307. It's all a lot of magic for very little gain.
innocenat 5y ago
It's depend. For CJK fonts you don't want single big .woff2, you want to subset each font to smaller subset of characters, which Google Font does automatically.

asadkn 5y ago

The difference isn't as much as it used to be in terms of file-size optimization as woff2 is pretty much supported by all browsers and you don't have to serve anything else now. Except for CJK and Arabic fonts, which have to be split or their woff2 size would be a few MB - this is Progressive Font Enrichment [1]. However, once distinction is font hinting data [2]. Google Fonts serve different files based for Windows vs Mac. The windows variations have hinting included. [1]: https://rwt.io/typography-tips/progressive-font-enrichment-reinventing-web-font-performance https://rwt.io/typography-tips/progressive-font-enrichment-r... [2]: https://www.typotheque.com/articles/hinting https://www.typotheque.com/articles/hinting

WorldMaker 5y ago

This site does seem aware of that and offers CSS options based on what are probably the two most common CSS returns from Google: a "Best Support" option that includes a number of legacy formats and "Modern Browsers" option that merely gives the browser a choice between WOFF and WOFF2, based on if they support WOFF2 or not.