Loading webfonts with high performance on responsive websites


  • Loading webfonts with high performance on responsive websites

    Only serve #fonts in woff format Other browsers get the old “websafe” fonts Download the font in “binary” format and optimize it Serve the fonts yourself Serve them as #css files - base64 encoded data URIs If the user doesn’t have the font, load it asynchronously and store in localStorage Otherwise load it from localStorage without accessing the server Have fun because your site renders much faster and your users have a much better usability experience


    • Bon j’ai envoyé un mail à l’auteur car impossible de commenter sur son Disqus sans avoir un compte autre part, et il m’a répondu, à propos de test de connectivité, donc je vous en fait profiter :

      I think connectivity tests just aren’t reliable now. You can maybe make some predictions, but there are many factors, which make it almost impossible to guess appropriate enough. On a mobile device it also changes almost every time e.g. when you are travelling.

      The cool thing about my method is that the browser loads those fonts asynchronously and it doesn’t really matter whether the font files can be downloaded or not, because the content is always going to be visible. In the worst case it will be displayed with fallback fonts.

      What could be more interesting is to optimize the font stack. Each device has some default fonts which are always installed: like Roboto on Android, Tahoma on Windows etc.

      Et effectivement, un truc intéressant, dans la pile de polices, après avoir mis celle qui doit être téléchargée, mais avant celles qui sont génériques ("verdana", « sans », etc), c’est d’arriver à trouver des polices qui sont dans chacun des systèmes un peu connu du marché (Windows 7 et 8, Android, OSX, Ubuntu, etc).

      De cette manière, même sans avoir encore chargé la police voulue, le site sera tout de même plus joli qu’avec du verdana !

      C’est, entre autre, aussi une idée pour la dist de #SPIP même quand on ne charge aucune police !

    • La suite, toujours du même auteur :

      In my previous article about webfont loading I showed a technique about how to load webfonts without blocking page rendering and without annoying the users with flickering text on all pageloads. This time I show you an optimized version of the script and provide a solution for WOFF2 support for the newest browsers.


      – The users must see the text as soon as possible.
      – As longs as the font is loading, the text must be rendered with the fallback font so that users can see and read it.
      – Users shouldn’t be annoyed with flickering text on each page load.
      – Modern browsers with WOFF2 support should receive the fonts in WOFF2 format. This means ca. 30% less filesize.