Early 2022, a court in Germany found a company guilty of violating users' privacy by using Google Fonts on their website: Google Fonts was ruled GDPR non-compliant! Five months later, Bunny CDN launched a privacy-first, GDPR-compliant, drop-in replacement for Google Fonts, named Bunny Fonts.
Google stopped storing users' IP addresses later that year, making it on par with Bunny Fonts as to GDPR compliance, so how do you decide which webfonts service to use?
Site speed is more important than ever before, so let's dive into performance of Google Fonts and Bunny Fonts.
This article is an in-depth comparison of Google Fonts and Bunny Fonts performance.
Comparison Summary
Bunny and Google score about same when it comes to CDN network size, DNS, TLS and caching headers.
| Bunny Fonts | Google Fonts | |||
|---|---|---|---|---|
| Embed code, default variant |  |
CSS @import |  |
Link in HTML |
| Preconnect in HTML embed code | |
Wrong/ineffective | |
Good |
| font-display |  |
Supported, but not in embed code | |
Yes |
| Font files size | |
Heavy | |
Light |
| Font files can be preloaded | |
Yes | |
No |
| Blocked in China | |
No | |
Sometimes |
| HTTP/3 | |
No | |
Yes |
| Caching | |
Good | |
Good |
Embed Code
Bunny Fonts and Google Fonts allow you to browse and select fonts, to then copy & paste the embed code into your CSS or HTML. The embed code comes in two flavours: HTML and CSS @import. Let's look at the embed code first and then see how each code performs.
Bunny Fonts shows the CSS @import code by default:
<style>
@import url(https://fonts.bunny.net/css?family=roboto:300,400);
</style>
Bunny Fonts HTML embed code:
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=roboto:300,400" rel="stylesheet" />Google also presents both options and gives preference to the HTML embed code:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet"><style>
@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap);
</style>Performance Analysis
I've created a simple test page for each of the 4 embed codes and ran tests on WebPageTest. The test pages with CSS @import have the import rule in the main CSS file as this is most common (vs in the HTML's head).
The pages using Google Fonts or Bunny Fonts CSS @import code perform the worst. The waterfall charts below show that nothing happens in parallel. Ugh. The browser does not discover a new domain to connect to or load something from until it has finished loading this file.
Bunny Font's HTML embed code is a bit better. The Bunny CSS file loads in parallel with the main CSS:
The best performance is delivered by Google Fonts using their HTML embed code. Why? Because their preconnect for the font file domain works.
Takeaways:
- CSS @import is bad for performance and this should come as no suprise
- Bunny should fix the preconnect in their HTML embed code so font loading is faster
A preconnect for fonts requires the crossorigin attribute, and the Bunny Fonts code does not have that attribute.
That's surprising because it's been known for years (see our 2017 article Faster Google Fonts with Preconnect).
File Size
The size of the Google CSS files are much smaller than Bunny's, but the absolute difference in bytes is insignificant because the CSS files are small: it doesn't matter if the browser downloads 600 bytes or 1.3 KB.
Google also serves much smaller font files and here the size difference is more than just a few hundred bytes. The table below shows the byte size of 4 popular fonts (WOFF2, normal 400, latin-ext). The Ubuntu font file is a whopping 28 KB heavier on Bunny Fonts 🤯
| Font | Google Fonts file size | Bunny Fonts file size | |
|---|---|---|---|
| Roboto | 7736 bytes | 11872 bytes (+53%) | |
| Lato | 2892 bytes | 5472 bytes (+89%) | |
| Poppins | 5544 bytes | 5544 bytes (+0%) | |
| Ubuntu | 17680 bytes | 46796 bytes (+164%) |
Further inspection reveals the unicode ranges are not same. That is odd.
Ubuntu font:
Google: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
Bunny: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309 ,U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
Caching
Browsers may cache the CSS and font files served by Bunny for up to 30 days.
Google allows browsers to cache the font files for as long as a one year but the CSS for 'only' 24 hours.
Does this mean Bunny Fonts has better caching of the CSS? No.
Google serves the CSS with the stale-while-revalidate header so browsers will use the file from cache after it has expired
and in the background fetch the latest version from a Google server.
CSS Cache-Control
- Bunny:
public, max-age=2592000 - Google:
private, max-age=86400, stale-while-revalidate=604800
Font Files Cache-Control
- Bunny:
public, max-age=2592000 - Google:
public, max-age=31536000
DNS, TLS and HTTP
Bunny and Google both have good DNS, TLS and HTTP. The only difference that matters here for performance is: Google has HTTP/3 and Bunny does not.
DNS
DNS lookups for both Bunny Fonts and Google Fonts will be fast most of the time because the close-by DNS resolvers can serve the answer from cache due to the popularity of the font service. Bunny Fonts has a lower Time-To-Live (TTL) so browsers will do a lookup for Bunny Fonts more frequently.
Bunny:
fonts.bunny.net. 300 IN CNAME bunnyfonts.b-cdn.net. bunnyfonts.b-cdn.net. 35 IN A 84.17.46.53
Google:
fonts.googleapis.com. 300 IN A 172.217.23.202
TLS
Certificate size, TLS protocol and features support ... it's all about same for Bunny and Google.
SSL Labs - fonts.bunny.net,
SSL Labs - fonts.googleapis.com,
SSL Labs - fonts.gstatic.com
HTTP
The latest version of HTTP is HTTP/3, which has several benefits over HTTP/2, including:
- Faster connection establishment
- Less effect of packet loss
- No more bad performance when phone switches from WiFi to cellular data
Google servers talk HTTP/3, but, unfortunately, Bunny Fonts does not yet support HTTP/3.
CDN Network Locations
Bunny and Google both have a widespreak CDN network with cache locations all around the globe. Google is well-known for having one of the best networks, but Bunny has caching servers in more countries, including Peru and Ecuador in LATAM, Latvia and Slovakia in Europe and Pakistan and New Zealand in Asia Pacific.
View the Bunny CDN locations and Google Cloud CDN locations .
Blocked in China?
It seems Bunny CDN is not blocked in China. Google services have a history of being blocked/unblocked for many years. Currently, Google Fonts are not blocked in China but you may expect the service to be blocked again in the future.
Optimized Bunny Fonts Embed Code
No CSS @import, font-display swap and effective preconnect or preload of the main font file.
<!-- Preconnect to Bunny Fonts server with CORS. Use this if not using preload -->
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<!-- Preload the main font file. Remove the preconnect when using this -->
<!-- Want to preload more font files? Limit to two to not slow down loading of more important resources -->
<link rel="preload" href="https://fonts.bunny.net/roboto/files/roboto-latin-ext-400-normal.woff2" as="font" type="font/woff2" crossorigin>
<link href="https://fonts.bunny.net/css?family=roboto:400,700&display=swap" rel="stylesheet" />Bunny Fonts Performance FAQ
- Will Bunny Fonts Make My Website Faster?
- How Can I Preload Bunny Fonts?
- Are Bunny Fonts Blocked in China?
- Is it Easy to Replace Google Fonts with Bunny Fonts?
- How Many Fonts Are Available on Bunny Fonts?
Will Bunny Fonts Make My Website Faster?
Probably not. It's better to serve webfonts from the same domain as your website because this uses an existing connection. No time is needed then to set up the new connection to the Bunny Fonts server. Only if your website is not on a CDN and your server response times are often high should you consider serving fonts from Bunny Fonts or Google Fonts.
How Can I Preload Bunny Fonts?
The Bunny font files have static URLs and this allows for preloading. Simply add preload code to the head of HTML, right before the links to stylesheets. View our Optimized Bunny Fonts Embed Code
Preload critical assets to improve loading speed
Are Bunny Fonts Blocked in China?
We've tested Bunny Fonts from a cloud server in Beijing, China on September 19 2023 and the fonts loaded just fine.
Is it Easy to Replace Google Fonts with Bunny Fonts?
Yes, but make sure to use the HTML embed code (not the CSS @import) for best performance and add the crossorigin attribute to the preconnect. For even better performance, use CDN Planet's Optimized Bunny Fonts embed code.
Optimized Bunny Fonts Embed Code
How Many Fonts Are Available on Bunny Fonts?
As of September 19 2023, Bunny Fonts provides access to 1510 font families.