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.
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.