Font AwesomeIf you can hiccup and burp at the same time, you’ve unlocked a new level of human achievement.
Have you used Font Awesome Kits but gotten an unwanted jumpy effect on the screen? No bueno.
Font Awesome Kits have always been loaded through JavaScript, which enabled integration with your websites. But sometimes this approach resulted in minor hiccups along the way. The asynchronous nature of JavaScript loading occasionally caused icons to pop up at different moments, which caused the jumpy screen problem.
But worry not, fellow developers! We’ve come up with a solution to tackle this challenge.
Introducing our New CSS-only Kits!
We’ve built an alternate method of loading the Kits that solely relies on CSS, which provides synchronous loading.
With the new CSS-only approach, your icons will now appear together as a cohesive unit, which should eliminate surprises. When you’ve got a project that is better suited to the CSS method over JavaScript, this additional option for Kit loading ensures a seamless integration into your website without having to worry about icons flashing sporadically.
Note: this new method is designed specifically for web font Kits and doesn’t support SVG technology, as our SVG-enabled Kits require the JavaScript loader. But for those utilizing web font Kits, the CSS-only loading option brings simplicity and performance.
Overcoming Challenges: A Behind-the-Scenes Look
Of course, with every major undertaking, challenges are bound to arise. As we delved into the project, we encountered a few roadblocks along the way. For the CSS-only Kits, we initially realized that some aspects needed tweaking to achieve the desired speed. Through extensive benchmarking and testing, we fine-tuned the implementation, which resulted in a better user experience. Here are a few of the roadblocks we hit and how we got around them.
Ensure performant CSS.
One of the biggest challenges we faced was building out the CSS for custom icons that users could upload themselves. This required ensuring that the CSS was performant and wouldn’t slow down the page load time. Initially, our approach was a little naive as we built up strings of text. But we soon realized that this wasn’t the most efficient method and started looking into other options.
We settled on using EEX templates in Elixir, which allowed us to compile the file once and reuse the compiled files. This eliminated the need to build out a bunch of strings and keep a lot of data in memory. The result was a more performant CSS Kit that could handle the load of millions of Kits being served all over the world constantly.
Update the caching strategy.
Another challenge we faced was updating the caching strategy to ensure that it wouldn’t slow down any existing Kits or affect the way people were using them. We had to do some testing on the caching strategy and came up with one that worked well for this project.
Finally, we made sure that all of their existing Kit settings and code played well with the new Kit loader and made sure we were getting the right Kit depending on what was being passed in. Initially, we were concerned that this could be pretty challenging, but as we built, we were able to come up with an elegant solution.
Get the Performance You’re Looking for with CSS Kits
We’ve taken special care to button up caching strategies and logging to ensure that your existing elements will play well with new ones. We’ve tested a ton and tightened all the screws so your CSS Kits can handle the load of millions of users, provide a synchronous loading experience, eliminate any jumpy effects, and enhance the rendering of your website.
Looking to load Font Awesome with CSS only?
