Host Custom Fonts on Flowdrive to Save Bandwidth
Host custom fonts on Flowdrive to cut bandwidth, speed up your site, and map fonts in Webflow using preload and @font-face.
If you use custom fonts on your website, you’re probably serving them directly from Webflow or your hosting provider. The problem is simple: fonts are requested on every first page load. If you get enough traffic, fonts quickly become a top bandwidth offender.
That’s why many Flowdrive users now upload their font files to Flowdrive instead. It offloads the bandwidth, gives them a fast global CDN, and prevents unexpected hosting bills.
In this guide, you’ll learn:
- Why hosting fonts on Flowdrive saves bandwidth
- How to upload fonts to Flowdrive
- How to map them with @font-face
- How to use them in Webflow
- A real working example you can follow
Let’s get into it.
Why Host Fonts on Flowdrive?
Websites with custom fonts typically load multiple font weights and styles. For example:
- Regular
- Medium
- Bold
- Semi-bold
- Italic
- Display variants
Each file is usually 20–60 KB. On pages with high traffic, this adds up.
Flowdrive solves this by:
- Serving fonts from a global CDN
- Compressing and caching them aggressively
- Reducing your origin bandwidth significantly
- Eliminating Webflow’s surprise bandwidth spikes
Many companies now offload video files + font files to Flowdrive as their biggest savings pair.
Step 1: Upload Your Font Files to Flowdrive
You can upload .woff or .woff2 files directly. WOFF2 is recommended because:
- Smaller file sizes
- Faster compression
- Browser-friendly
Once uploaded, Flowdrive gives you secure URLs like this:
https://files.tryflowdrive.com/cXrdbibsQPD7mtQegP7at
Save these URLs. You’ll paste them into your CSS style.
Step 2: Preconnect + Preload Your Fonts
To make fonts load instantly, add this to your site <head> section:
<link rel="preconnect" href="https://files.tryflowdrive.com" crossorigin>
<link rel="preload" href="https://files.tryflowdrive.com/FILE_ID" as="font" type="font/woff2" crossorigin>
Do this for every font weight you’re using.
Why preload?
Browsers fetch fonts earlier
Reduces layout shifts
Eliminates the “invisible text” flash
Step 3: Add the @font-face CSS
Below is a real-world example of a business using Flowdrive-hosted fonts.
Example: Waldenburg Font Family
<style id="brand-fonts">
/* Montvara Regular */
@font-face {
font-family: "Montvara";
src: url("https://files.tryflowdrive.com/a9F2kLmQw48sN2pD0xYc1") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Montvara Medium */
@font-face {
font-family: "Montvara";
src: url("https://files.tryflowdrive.com/Tp8wZk4LbN9xHr2Fq7Ue6") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
/* Montvara Bold */
@font-face {
font-family: "Montvara";
src: url("https://files.tryflowdrive.com/Q3dLm82Pn6sYt0KvR5Wx4") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* Optional: Montvara Condensed (mapped to Medium for example use) */
@font-face {
font-family: "Montvara Condensed";
src: url("https://files.tryflowdrive.com/Tp8wZk4LbN9xHr2Fq7Ue6") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
</style>
Important:
Keep everything inside a <style> tag in the <head> section or Webflow’s Custom Code > Head Code.
Step 4: Use the Font Inside Webflow
After adding the font via custom code, Webflow won’t show it inside the Designer.
But it will load on the published site.
You can style elements using:
Option A — Global body style
body {
font-family: "Waldenburg", sans-serif;
}
Option B — Use classes
.heading-waldenburg {
font-family: "Waldenburg";
font-weight: 700;
}
Option C — Use embedded styles
Inside Webflow:
Add an Embed element
Add a selector:
<style>
h1, h2, h3 {
font-family: "Waldenburg";
}
</style>
This gives you full control even if the Webflow Designer doesn’t preview your font.
Best Practices
Always use .woff2 first
Always preload your primary font weights
Use font-display: swap to avoid invisible text
Keep fonts between 20–60 KB for best performance
Host only the weights you actually use
Consider variable fonts if the family supports it
Common Questions
Does Flowdrive cache fonts globally?
Yes. Every font is cached on Flowdrive’s global edge, giving sub-50ms loads worldwide.
Will fonts affect my Flowdrive bandwidth?
Flowdrive doesn't charge for bandwidth so even if your fonts get 2TB bandwidth traffic it's all at $0 costs in bandwidht
Can I protect fonts from being openly downloaded?
Flowdrive is designed to deliver public assets fast.
If you need restricted or tokenized access, you can use Flowdrive Private URLs.
Conclusion
If your site uses custom fonts, hosting them on Flowdrive is one of the easiest ways to:
- Improve performance
- Reduce bandwidth overhead
- Make your site more stable under heavy traffic
- Serve fonts globally with low latency
It’s a small optimization, but for sites with scale (or lots of typography), it’s one of the most cost-effective wins.
Tags & Share
Manuel OgomigoStart hosting for free
Unlimited file hosting for Webflow projects.
Related articles
Continue reading with these related articles on similar topics.
Built for Webflow. Trusted by agencies.
Flowdrive works seamlessly with Webflow, and also powers static sites, headless CMS, and Jamstack projects. Flexibility built for growing agencies.
Take Control of your File Hosting on Webflow
Unlimited video & file hosting, blazing-fast delivery, fully branded for your clients.