Hi everyone🥳! Happy Tuesday, happy Tuesday to you all. I saw that a lot of you struggle to optimize their Webflow site speed and guess what🤔? I’ve launched a couple of episodes on Youtube on how to hit that 100% mark inside Google Lighthouse and WebAim.
So, how to make Webflow site load faster? Well, Webflow already produces great code and has super-fast servers👑. But we still need to give a helping hand here. This article will be about FONTS. Right, fonts and how to properly optimize fonts.
Alright, throughout our design, we might use Google Fonts. I use them a lot. They are free and look nice on our site. But the problem is that every time we do load up a Google Font on our Webflow site, we also add the Google API script which is loaded during the initial page load. The best bet here is to use our very own custom fonts. Even if we have to download them from Google. So, in today’s episode, we’ll cover the following items:
Downloading a Google Font. If you plan to use Google FOnts, please download the font family. Do NOT use Webflow integration from your Project Settings > Fonts tab.
We’ll learn why we should only use one font-family and two font weights. We’ll download Rubik font family and optimize the Regular and Medium weights.
Fonts have glyphs. We’ll use FontForge to edit our font file and remove the glyphs we’ll not use in our project. We’ll delete special characters and symbols.
Finally, we’ll export our font in Web Open Font 2.0 (WOFF2). This is the most optimized and compressed format for a font file and it’s widely supported on all browsers.
Being said, let’s dive into the video:
Alright, here are the resources I’m covering in the video:
-
Download FontForge: http://bit.ly/3jSeJvi
-
Understand a Font and Reducing the Size: http://bit.ly/2ZiUH40