Support my work Buy me a coffee logo icon coffee cup

Gatsby Omni font loader

Gatsby Omni font loader
Platform: Gatsby, React
Type: Open-source project
View Project: Project Site

About The Project

Gatsby is a popular static site generator, based on React. It is a very flexible framework due to the extension options using plugins. While researching Gatsby and taking notes of must-have plugins, I've noticed that all font loading plugins are either deprecated or not maintained anymore.

After noticing the gap in the market, I've decided to develop the plugin myself using modern async font loading and FOUT handling methods.

Development

I've used Harry Roberts' fast font loading method to load fonts asynchronously, and I've came up with the really simple and effective method to detect when font has finished loading using Web Font API. With these two combined, fonts can be loaded after the website has finished loading and the change between the fallback font and main font will be barely noticeable.

I've also wrote anarticle for CSS-Tricks where I've explained in detail what is going on under the hood.

Open-source success

"Gatsby Omni Font Loader" has been launched October 31st 2020 and it has been a success. It received more than 1,500 downloads in the first month and it has been endorsed by the community. Even Gatsby team has noticed the success and reached out to me on Twitter.

That's a lot of downloads - Congrats, Adrian!
- Gatsby team (on Twitter)

I am continuing to actively work on the plugin, continuously improving and optimizing it. Community contribution and bug reports are very much welcome!