Will Google Color Fonts Affect Website Performance?

Finally, vector fonts with gradients and depth are available with COLRv1 in Chrome 98. This new lightweight format can convey messages in a new and vibrant way.

We use color fonts every day and don’t know it.

Google thinks of everything… We use color fonts every day and don’t know it. Who doesn’t text or slack without emojis? They help communicate emotions when voice tone and facial expressions aren’t available. Emojis are the OG of color fonts, so why not apply the same principles to the fonts we’re using as we launch new websites?

It’s time for a font and emoji facelift… But, does this new offering affect website performance? They are all vector and CSS based, so it shouldn’t make too much of a difference, right? The key to solid website performance is consistent testing, so in true Valtira form, we got to work.

Testing testing 1 2 3…. We started by creating a basic page with a header, small body, and footer on a standard WordPress theme with Divi page builder installed. The first version included a small headline with Bungee Spice color font and custom code. The second version had the same headline with Poppins google web font.

Drumroll, please… Page speed insights scored the color font page 81/100 for mobile and 97/100 on desktop. Not bad, but we want mobile scores in the 90s for the best performance.

The Poppins google web font page scored 93/100 on mobile and 99/100 on desktop, a near-perfect metric.

So by implementing the new color fonts, it costs us a whopping 12 points in the mobile score. Keep in mind this page is basic, most pages will still need images/icons/forms/carousels, etc and just our font choice cost us 12 points!

Enhance… We tested with code provided by google to bring the Bungee Spice font to life. It seemed like there was room for performance improvement, so I asked one of our expert page speed performance developers to take a look. They refined the code while keeping the same visual design bringing the mobile score to 89/100, only a 4-point difference from the standard google web font.

In the end, the new google color fonts make a measurable difference in performance but adds a new, visual style that could help your brand standout. Every website will need to make sacrifices to performance to build their brand, whether it’s choosing to use video, carousels, animations, forms, or the endless amount of content additions you can choose to make your brand unique. Valtira can help you test and refine those choices so your customers are getting the best, and fastest, customer experience possible.

Want to brainstorm?… Are you thinking of incorporating new tech on your site to help you stand out in the crowd? Valtira can help you build, test, and implement the latest and greatest while improving your website’s overall efficiency. Drop us a line to see how we can help.

Ready to get started or have questions?

We’d love to talk about how we can work together or help you to brainstorm your next project and see how we might help.

More from Valtira

Anatomy of an Outage

A Quick Fix Turned Long-Term Solution In 2017, an organization we know well decided to expand their website's reach globally. Business pressures were pretty strong at the time, so they outsourced the front-end development to a well-known, but low-cost off-shore...

Continuing Our Carbon Neutral Journey

We reduced our emissions by moving to a fully remote business model and we developed financial incentives for our staff to heat and cool their homes (and home offices) with 100% renewably sourced electricity. ⅓ of our US-based staff opted into the program and are...