Michael @ Work :: Space

Font face optimization

For those who really into app performance optimization this is must see video about embedding fonts: https://t.co/yCuBTcANy3
Until now I included my fonts like this:

But this does extra http request. And we don't need it. So here is what can be done to get rid of these requests:
1) I go to https://fonts.google.com and download my fonts
2) Then I go to https://www.fontsquirrel.com/tools/webfont-generator upload all of my fonts and choose expert settings. There I pick only Woff format, Custom subsetting (with only basic latin and punctuation selected). CSS Base64 Encode. And save my settings. That's it. Then I just click Download your kit.
3) And for one of my fonts I get 10 times less size (30kb against 350kb initially) and for another twice less size. And this is pretty cool thing. There is still slow internet in many places out there. And this is besides getting rid of http requests.
4) Next thing I open the stylesheet.css file which is downloaded along with the fonts and copy it's contents to my project stylesheet file.
5) And the last thing is for those browsers that still doesn't support woff. I go to https://css-tricks.com/snippets/css/font-stacks/ and choose the appropriate font stack for each font I use.