Webflow offers three different type of support for fonts;
- Google fonts, which are hosted on Google
- Custom fonts, which are font files that you upload to Webflow.
- Adobe fonts, which are hosted on Adobe's servers
Feature Comparison
How Fonts Load
My tests indicate that there are at least two "behaviors" Webflow has with font loading, and likely a third for Adobe fonts ( untested ).
If you use Google-hosted fonts, Webflow appears to use the WebFont.load which will load the font immediately, even if it's not used.
It looks like this;
<script type="text/javascript">
WebFont.load({
google: {
families: ["Bitter:400,700"]
}
});
</script>However if you upload fonts to Webflow, then you seem to get a different behavior, in which the font is only represented in the CSS;
@font-face {
font-family: 'Big Noodle Titling';
src: url('https://cdn.prod.website-files.com/6702d1e5956732f2d7a270ad/6735818c6ef6409ea7e08783_big_noodle_titling.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}In this second situation, modern browsers are smart enough to be efficient about that load- unless the font is actually used on the page, it shouldn't load it.
That means you should be able to-
- Upload your font to Webflow
- On your Chinese localize only, use that font for locale-specific styling
The Trade-Off
There's a trade-off here.
Fonts that are loaded from Google might be less efficient on performance and total download, but those fonts also use none of your Webflow bandwidth.
Fonts that are loaded from Weblow are more performance-efficient, and load only when needed- but consume Webflow bandwidth when they are delivered.
You have to decide which type of performance you want to optimize for.
Optimizing the Font Bandwidth
For those concerned about bandwidth, there are three strategies you can use to reduce the number of bytes sent from Webflow's CDNs.
Off-Host Your Fonts
You can use Google fonts or Adobe fonts to ensure that your fonts are not delivered from Webflow's CDNs.
If you have custom fonts, and need to off-host those, there is a special technique we use. See below for notes.
Reduce your Font Families
Look out for over-use of different fonts. If you can consolidate and remove fonts you don't really need, so much the better. This will reduce your bandwidth.
Reduce your Font Variants
When you use a font, you specify the weight and styles you're using and those are then included in the font you upload.
If you're using several different weights of a font, it will increase the size of your font fonts. It's often much more efficient to use variable fonts instead.
Localized Fonts
In localized site, you may use special localized fonts only on those specific locales.
It may be possible to setup your fonts so that those fonts only load for users who switch to that locale.
Off-hosting Custom Fonts
If you have custom fonts but need to reduce the bandwidth from Webflow's CDN, you can use this approach;
Host the files
Host the font files somewhere else like Cloudflare R2 or Amazon S3. Ensure that you have configured CORS accessibility which matters for fonts.
In Cloudflare that can be done with a header transform rule to create an access-control-allow-origin = * for your R2 bucket subdomain specifically.
Notes;
Custom CSS Embed
In your Webflow project, embed custom CSS Embed on all of your pages to load the font, and to assign the Font Family to a CSS variable, e.g.;
<style>
@font-face {
font-family: 'Basterds';
src: url('https://files.sygnal.com/Basterds.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* Define CSS variable for font family */
:root {
--basterds: 'Basterds';
}
</style>Create a Webflow Variable
With the name of the CSS Var, in this case- Basterds .
Style Your Site
Now with the new CSS Var, you can bind your Font Family of your classes to the variable directly and the font will properly show in the designer.
Remove you Uploaded Font
Once you're ready, remove your Uploaded Font from site settings and verify you've made all of the changes correctly in your site.
You're all set!
