17 ms·
I have a website[1] that uses web fonts[2]. I have found that if you host the fonts yourself and compress the font files using Font Squirrel's web font generato
by interfacesketch 13y ago
I have a website[1] that uses web fonts[2]. I have found that if you host the fonts yourself and compress the font files using Font Squirrel's web font generator service, you can get fairly small font sizes. I'm using two font weights (regular and bold) and the total comes to 104kb. Admittedly, that's quite large for a mobile website, but I think it's acceptable for a desktop site.
I've found the font files served by Google fonts are quite large and this is probably because their fonts contain the entire character set. Font Squirrel strips out characters it thinks are not needed.
[1] http://www.interfacesketch.com http://www.interfacesketch.com
[2] The font I'm using http://www.behance.net/gallery/ALEO-Free-Font-Family/8018673 http://www.behance.net/gallery/ALEO-Free-Font-Family/8018673
- jeffmould 13y agoGone with the same solution myself. Significant benefits, plus it fixes the issue with poor rendering of Google Fonts in Chrome for Windows. Wrote a post about using Font Squirrel a few weeks back on my blog: http://www.jeffmould.com/2014/01/29/how-to-fix-google-fonts-in-chrome/ http://www.jeffmould.com/2014/01/29/how-to-fix-google-fonts-...
- aruggirello 13y agoDidn't Google fonts just add such a feature? (though it's still in beta)
- kderbe 13y agoThat's incorrect. Google fonts subsets the font (default is latin). You can also limit the font to just the characters you want by appending &text=ABCDEF... to the URL. [1] They use other tricks to shrink the size of the font: WOFF2 is served to compatible browsers for further compression, and they remove unused hinting when they serve fonts to an OS X client. [2] Their caching and CDN are good too. There are reasons not to use Google Fonts, but download size is not on that list. [1] https://developers.google.com/fonts/docs/getting_started#Optimizing_Requests https://developers.google.com/fonts/docs/getting_started#Opt... [2] https://www.youtube.com/watch?v=sqesm0euf9M https://www.youtube.com/watch?v=sqesm0euf9M