Skip to content

Instantly share code, notes, and snippets.

@mminguezz

mminguezz/notes.md

Forked from paulirish/webfont-performance-notes.md
Created February 1, 2016 08:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mminguezz/c2ffdf5dc4829855cf33 to your computer and use it in GitHub Desktop.
Save mminguezz/c2ffdf5dc4829855cf33 to your computer and use it in GitHub Desktop.
Download ZIP
webfont performance notes
Raw
notes.md

Just jotting some notes on delivering webfonts performantly…

still an incomplete draft.

basics

  • identify which fonts you NEED for the first render (A), and which you dont (B)
  • you want the network reqs for A to start ASAP. ideally the @font-face req is in a style tag, following CRP guidelines
  • you don't want a @font-face to be in CSS that's included via JS. this is equivalent to JS document.write'ing more JS.

smart about priority

typekit async

http://blog.typekit.com/2015/08/04/new-embed-code-for-asynchronous-font-loading/ http://help.typekit.com/customer/portal/articles/649336-embed-code

my demo using async: https://output.jsbin.com/vumexi/quiet

other

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