Host Custom Fonts on Flowdrive to Save Bandwidth - Flowdrive Blog
https://tryflowdrive.com/
svg]:px-2.5" type="button">Sign in Open main menu
svg]:pointer-events-none [&>svg]:size-3 bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent mb-4 cursor-pointer hover:bg-white hover:text-primary">← All Posts December 3, 2025 # 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 section:
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
``
`/* 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;`
`}`
``
Important:
Keep everything inside a