See How Contractors Stay Booked Up
Watch a short walkthrough of how I get contractors found and called, then book a time with me if it fits.
Manuscript for the video: Webflow Custom Font Hack for Faster Load Time has been edited for flow and readability
Setting Up a New Website Build
I am getting ready to do a new build. One of the things that I do is set up the style guide. And part of setting up the style guide is to pick the correct fonts.
You add additional fonts to Webflow in the project settings font section. Webflow makes adding new Google Fonts extremely easy. Webflow will pull in the different Google Fonts for you. In this case, I have used two Google fonts, Lora and Roboto.
Webflow's Google Font Integrator Can Impact Page Speed and SEO
While Webflow makes it easy for you to pull those fonts right into Webflow, doing so may impact the load speed of your website, which will ultimately impact your website's SEO score.
If you've ever done a Google Lighthouse page speed test, you might find that your mobile score is a lot lower than you would like.
One way you can help increase that score, there are really a number of different things you must do, but one way you can help your score and ultimately your website ranking is by taking advantage of Webflow’s custom font uploader. You can host custom fonts alongside your website without having to connect to Google to pull those fonts.
Hosting fonts alongside your website helps decrease your website’s load time. Decreasing load time is one factor that can help increase your search engine ranking.
I have to emphasize that hosting your fonts on your Webflow account is not a magic bullet. It is not the one factor that is holding you back. There are a number of factors you have to tweak in order to increase your page’s load speed. But this is one factor that will help. It is easy to take advantage of, so you might as well take advantage of it.
There are a couple of hacks you can use to download Google fonts, but I found a website that makes it easy. The site is Google Fonts Helper. It allows you to download Google fonts. Fonts you can upload to your Webflow account. Search for the Google font you want to download and then select the weights you need. Scroll to the bottom of the bottom of the page and download the file. The site gives you all the different files you need and more. It downloads the fonts in a zip file. Once you unzip them, you can come back to Webflow and upload them using the custom fonts section. Navigate to your project settings and then to the fonts section and begin uploading the custom fonts you just downloaded from google font helper.Webflow tells you the different files you can upload, but I usually upload the WOFF and WOFF2 files. Don't Miss These Actions When Uploading FontsDon't forget to select your font weight and then click the green button.Once you upload them to Webflow, you actually aren’t finished. I made this mistake in the past and I was wondering where my fonts were at. You have to click the green upload button to actually upload them into Webflow. Don’t forget that step.Before you click the green button, you can go through the list and match the font weight. Finish the Process with a Style GuideMake sure to select the all tag. In this instance, I am going to select the All H1 Headings tag and then select the font I uploaded. In this case, Lora 700.Once you get everything uploaded, you can go back over to your Style Guide and finish setting up the project. I hope you are using a style guide. Back in the Style Guide, you want to make sure you connect the appropriate font to the right style setting. For instance, for headings you want to use the All Headings tag. When using google font helper, you have to make sure you select the correct font weight for the corresponding style on your style sheet. In this case, I want my headings to be bold, so I'll make sure to select Lora 700.One thing you have to do with the files google font helper gives you is to make sure you select the right font and weight. If you notice, most of them have a weight number associated with it, except one. The one that doesn’t is the regular font weight. But you have to make sure you select the right weight. Hopefully this video was helpful for you. Hopefully it helps improve your website load speed and ultimately your SEO rankings.
10 Marketing Mistakes Contractors Make
A free guide to the 10 ideas that sound reasonable but cost you jobs, and the 10 rules that keep your phone ringing and your calendar booked up.
Questions You Might Be Asking
Expect to shave 100-300ms off your Largest Contentful Paint, depending on how many weights you were loading from Google. The biggest wins come from eliminating the DNS lookup, the TCP handshake, and the SSL negotiation to fonts.googleapis.com. That's usually one or two fewer round trips before the browser can even start downloading the font file. Not a silver bullet, but meaningful, especially on slow mobile connections.
Upload WOFF2 as your primary format and WOFF as a fallback. WOFF2 is the modern standard — smaller file size, better compression, supported in every current browser. WOFF covers older browsers. You don't need TTF, OTF, or EOT for modern web projects; they're larger and unnecessary. Webflow accepts all formats, but sticking to WOFF2 plus WOFF keeps your bundle lean.
Be ruthless — most sites only need two or three weights total. A regular weight for body, a bold for headings, and maybe a medium for emphasis. Every extra weight is another file the browser has to fetch and parse. If you're tempted to load four or five weights "just in case," audit your actual designs first. You almost never use them all.
Yes — this is actually a meaningful reason to self-host. Loading Google Fonts from googleapis.com sends each visitor's IP address to Google, which German courts have ruled violates GDPR. Self-hosting keeps the request on your own domain, so no third-party data transfer happens. If you have EU visitors, this alone is worth the switch, regardless of the performance gains.
