Skip to content

Instantly share code, notes, and snippets.

@scabbiaza

scabbiaza/gist:e2b10acf715de8af51df

Last active August 29, 2015 14:27
Show Gist options
  • Save scabbiaza/e2b10acf715de8af51df to your computer and use it in GitHub Desktop.
Save scabbiaza/e2b10acf715de8af51df to your computer and use it in GitHub Desktop.
Download ZIP
Performance
Raw
gistfile1.md

Fonts

Keep fonts optimized

  1. Set should be as minimum as possible

  2. Fallback on smaller fontset / standart fontset on mobile devices

  3. woff2 fonts types for progressive browser (Chrome, Opera, Android)
    Converter: https://everythingfonts.com/woff-to-woff2

  4. Gzip ttf, eof, svg fonts for old browsers, woff & woff2 are already optimized

  5. Put most usage font loading in html:
    CSS request containing your font-face definition should not block page render.

  6. Included fonts should be limited in minimum languages. For example by including from Google-Fonts, we need to get only latin coding.

Useful links
https://css-tricks.com/snippets/css/using-font-face/
http://blog.typekit.com/2013/04/17/fallback-fonts-on-mobile-devices/
https://www.igvita.com/2014/01/31/optimizing-web-font-rendering-performance/
https://www.igvita.com/2012/09/12/web-fonts-performance-making-pretty-fast/#optimizing
https://www.filamentgroup.com/lab/font-loading.html
https://www.filamentgroup.com/lab/font-events.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment