Updates to our asynchronous icon and font loader
“Let me show you my plan for sending you home. Please excuse the crudity of this model. I didn’t have time to build it to scale or paint it.”
Today we are launching some updates to how icon fonts and typefaces are loaded in all browsers.
Warning, breaking changes:
If you were using async loading before and have added “wf-fortawesome-n4-active” or “wf-active” those classes have changed. We’ll be updating our documentation and posting a follow-up article that goes into detail.
Just a few months ago we released Font Awesome CDN. With that product we introduced asynchronous CSS loading. With this feature, browsers are able to render the page without waiting for your embed code to load.
Since then we’ve brought that same async loading to Fort Awesome but we didn’t have any documentation or explain what was going on behind the scenes or help you use it. Generally, it’s made pages load quicker but we now have users asking us about flashes of unstyled text (FOUT) and flashes of invisible text (FOIT). We also discovered that Safari and iOS weren’t always sharing font events correctly. In other words — we gave you some beta (at best) software.
Today, we are improving this feature for both Font Awesome CDN and Fort Awesome in a few key ways.
Batteries included in your embed code
Your embed now includes loadCSS. This eliminates a network request that loaded webfontloader as a separate script. This also fixes an issue where using Google Fonts or other services that defined a WebFontConfig would clash with any Fort Awesome configurations.
This results in an overall well-behaved, isolated, and performant embed code.
Better font events
We are also replacing the font event detection from webfontloader with the equally excellent FontFaceObserver. Since it’s considerably lighter-weight we bundle it with your embed code too. We also are now including a marker icon when you publish your kits that will make icon font detection bulletproof (hopefully). This fixes our bug with Safari and iOS.
Now when your icons are ready the class “fa-events-icons-ready” will be added to the <html> element on the page. This is based on your icon prefix so if you changed it to “mysite” the class will be “mysite-events-icons-ready”.
Other event states included are “loading” and “failed”. For example, while the icons are loading you’ll see “fa-events-icons-loading”. We’ll be posting documentation on this just as soon as we can.
With this feature you’ll be able to control FOUT, FOIT, and FOFT with laser-precision.
Typefaces events on Fort Awesome
Fort Awesome has supported typefaces for many months now but font events related to individual typefaces were missing. Today, typefaces will now get the same font events love that your icons have. If you included the Arvo typeface at weight 400 you can expect “fa-events-typefaces-arvo-ready” and “fa-events-typefaces-arvo-400-normal-ready” to be added to the the <html> tag.
We’re not done yet
We hope this levels-up kit loading for our customers but this is only one step along the path. We’ll be adding documentation you can share with your team right into your kit that will help you address various issues that can sometimes go along with async CSS.
As always, let us know if you have questions or need help. We love hearing from our customers.
