114kb is bigger than a whole product we sell (uncompressed!).
For some design focused sites I get it. But personally, I like the system font stack:
For some design focused sites I get it. But personally, I like the system font stack:
* Linux desktop fonts are a mess. Two examples: “Helvetica” on Linux often times points to a Ghostscript font with vertical alignment problems when used in a browser, and the “Roboto” font for Android can use Linux rendering problems as the GitHub team discovered.
* Chrome has had significant font rendering issues. GitHub’s designer mentions subtle kerning issues with the San Francisco font in Chrome on MacOS; I’ve seen some pretty serious font rendering issues with Chrome in Windows, where fonts end up being about 10-20% lighter.
* Very little consideration has been given to how the system font stacks look on Android phones, who are about 40% of the web browsing public.
By hosting the fonts on the web page [1], we eliminate these problems. The Linux and Android font rendering mess is resolved by just providing our own fonts [2]; I have dealt with the Chrome rendering mess by very carefully testing the fonts in Windows on a low-resolution 75dpi display until they looked as good as possible on this “lowest common denominator” display [3], while looking good in other browsers and on higher resolution displays. MacOS, nicely enough, always renders the fonts nicely, even on older Macbook Airs and external 75dpi displays.
Another thing: All of the fonts are OFL open source fonts, and, as a matter of principle, I prefer that no proprietary fonts are used to display my web page.
[1] Yes, 114kb is huge for late 1990s web designers who had to push everything over a dialup link, but it’s a drop in the bucket these days, even with cell phones with 3gb/month on low end plans. I went to a lot of effort with Zopfli and very aggressive subsetting to make the font CSS file as small as possible.
[2] There’s an issue with the % on Linux, since Linux insists on using its own hinting, resulting in one of the bowls being taller than the other bowl. Besides that, the font looks great in Linux.
[3] I spent days tweaking ttfautohunt settings for the font with Chrome/Windows as my reference, and made the font a little thicker by using Charis SIL for body text instead of the smaller in size but thinner Bitstream Charter.
If they could do this, then font stacks could simply be “Font-family: "Noto Sans", sans-serif;” or “Font-family: "Noto Serif", serif;”, or, the not as good but still usable “Font-family: Arial, Arimo, "Liberation Sans", sans-serif;” and “Font-family: Tinos, "Liberation Serif", "Times New Roman", serif;” font stacks. This would solve the pesky “download the fonts” problem.
Another solution would be for Bill Gates to say “I will release the 2002 Core Fonts version of the Georgia typeface under the OFL open source license if Brin will install it on all Android devices moving forward” or better “I will release Cambria and Calibri under the OFL open source license if Steve Jobs and Brin agree to install this font on all Apple computers, iPhones, and Android phones moving forward”
Of course, in the real world, it would logistically be easier to get Steve Jobs to show up alive and well at this meeting then to get all attendees to agree on a font which all operating systems will have.
Another place where it might actually be possible to pull this off is to have all browser makers, especially Android browsers to include Arimo and Tinos with the browser moving forward. Actually, it looks like Arimo/Tinos are already on most Android phones: https://help.xara.com/article/440-web-safe-fonts-on-android-...
Edit: Based on testing, Arimo is on my somewhat older Android phone, with the same metrics as Arial on my Windows 10 desktop machine, but, annoyingly enough, while Tinos also looks to be there, it doesn’t have the same metrics as Times New Roman on my Windows 10 desktop machine. So, yeah, “Font-family: Arial, Arimo, "Liberation Sans", sans-serif;” is pretty much the only font stack we can use and be guaranteed to have the same metrics across mostly everything.
I can squeeze in just the regular and italic text of a serif font in 53,512 bytes, so we can get a consistent looking serif across platforms at the cost of 52.26KiB, and then just use Arial/Arimo (the only across-the-board websafe font stack where we can retain font metrics) for sans text.