davidbgk
/
larlet-fr-david-cache

title: Introducing localFont
url: http://jaicab.com/2015/03/03/introducing-localfont-a-localstorage-solution/
hash_url: cbddac5829d8578fbe45f27d58e3e8eb

<p>I’ve been busy. Since I joined <a href="http://basecreative.github.io/basecreative.co.uk/">Base Creative</a> last October I have done nothing but push myself forward to a better front end developer. I am using <a href="http://basecreative.github.io/styleguide/">pattern lab</a>, getting rid of jQuery (finally) and loving attending lots of conferences like Smashing Conference in Whistler and Awwwards in Barcelona. </p>

<p>All that networking made me realise how much people were doing for they websites and what they were using. It surprised me a lot though, that nobody I met this past few months were really worried about font loading performance except for a few big companies.</p>

<h2 id="the-localstorage-solution">The localStorage solution</h2>
<p>There are tons of approaches to efficient web font loading but this is the one I like the most. You may know that this site has been using the localStorage caching solution since its last redesign, as being used on <a href="http://smashingmagazine.com">Smashing Magazine</a> and <a href="http://theguardian.com">theguardian</a>. This approach uses localStorage to store the CSS code of the <code>@font-face</code> declarations where every file is encoded as a string using the base64 algorithm.</p>

<p>With this amazing combination we get fast access to the CSS with localStorage (which is way faster than regular HTTP caching) and save all the font file requests by providing the font files as part of the CSS file. 
The only downside to this approach is <strong>the first load</strong>, which could take a bit but after that everything goes smoothly. Also if localStorage is not available (you can provide a cookie fallback) you have to load it every page load. Otherwise, it is almost instantaneous. And browser support is as good as IE8+, so that’s more than enough for these days.</p>

<p>Once you got your CSS file sorted, you place a block of JavaScript that checks if the CSS is in localStorage. If it is, it injects the CSS straight into the page. If not, it looks for the file and does the same with its content, storing it on localStorage for future page loads. This script should go inlined in the HTML in order to get executed as soon as possible.</p>

<p>Now every time I explain this approach to somebody I sense how the loose all the interest in it with the encoding, just because they don’t know how to do that or the experiences they have had with it in the past haven’t turned out great. The thing is, base64 encoding may affect your files and you could end up with a different output over the original font file. </p>

<p>Currently people using this approach have tried generating the encoded fonts by themselves or using <a href="http://www.fontsquirrel.com/tools/webfont-generator">Font Squirrel’s webfont generator</a>, which actually has a “base64 encode files” option but also produces all the different formats of every single font, resulting in a mess of CSS code that you have to work your way through.</p>

<h2 id="localfont-and-the-need-for-a-side-project">localFont and the need for a side project</h2>
<p>While discussing the process to keep a performance budget at work, I realised that if we wanted to use the localStorage caching approach on a project, it would take ages to get it working, and more if we wanted to use it on every project.</p>

<p>This need of a tool and my need to play more with Vanilla JS pushed me into a new side project I have called <a href="http://jaicab.com/localFont/">localFont, implement localStorage web font caching in seconds</a>. This tiny little online tool will generate the final CSS file for you and give you the piece of JavaScript you need to launch it. </p>

<p>Just drop the font files, set up each font’s style and weight and then use the code that will be automatically generated. By default it uses <code>/font.css</code> as the default path of the CSS, but it can be changed. It’s important that it’s an absolute path so it can be accessed from any directory.</p>

<p>Right now it just works with woff, woff2 and ttf formats and it can handle one font family at a time. If you want to add more font families, feel free to clear all up and generate the CSS again with the other family and put them in the same CSS file.  </p>

<p>All the source code is available <a href="https://github.com/jaicab/localFont">on github</a> so feel free to open an issue, send me a pull request or <a href="https://twitter.com/jaicab_">fire me a tweet</a>.</p>