Academy › Build › Create your website
The pretty font that's also slow to arrive
You'll leave this lesson knowing how many fonts and weights your website actually needs, which ones are worth loading, and what to ask the person building it for you.
By Yodai · Published on September 6, 2026 · Updated on October 12, 2026
You already know how much a photo weighs and what format to save it in. You know which video stays as a video and which one becomes a photo. There's a third weight almost nobody checks, and it's the one you notice least, until it's too late: the font.
The designer picked it because it looked elegant. Four different weights: a light one for headlines, a bold one for buttons, and maybe an italic reserved for quotes on the site. That font isn't installed on your customer's phone. It has to download the whole thing before it can write a single word on the screen.
And until it arrives, one of two things happens. Either the screen stays blank, with nothing to show, or an ugly fallback font shows up and switches to the real one as soon as the file finishes downloading. The problem isn't having a nice typeface. It's loading too many variants of it at once, before the customer sees anything.
What a font actually means for a phone
When you say "I use Montserrat," your phone hears something different. It hears one file for every weight and style: regular, bold, light, italic. If your site asks for all four, the phone downloads four separate files before it can write the first headline, and none of them work for the other three.
Each file weighs between twenty and a hundred kilobytes, depending on how many characters it includes. That's not as much as an uncompressed photo. But it adds to the page's total weight, and more importantly, it adds to the wait: the text doesn't show up until that specific file arrives. A phone with weak coverage stares at a blank screen longer than it should, just because of the font.
The format that file is saved in also changes the weight, just like with photos. A font file in desktop format, ending in ttf or otf, can weigh twice as much as the same design saved in woff2, the format built for the web. If your designer hands you the font in desktop format, ask for the web version: the same font, half the weight.
In this example, there's nearly two hundred kilobytes in fonts alone. And on most sites, three of those five files get used for two sentences in the footer that nobody reads on mobile: the italic for a quote, the light weight for a decorative subheading, the bold for a button that shows up just once on the whole site.
How many weights you actually need
The rule is short: two weights per font, three at most. One for body text. Another for what you want to stand out: a headline, a price, a button. If you really need a third, make it the light weight, and save it for a large headline where it'll actually show.
Italics are almost never necessary. If you're using them for a customer quote, try upright text with quotation marks instead: it reads just as well and saves you a whole file. Same goes for a restaurant menu that separates categories with four different font styles: an uppercase line and a bold weight are enough to tell "Appetizers" apart from "Desserts," without adding a fifth file.
And one font family is enough, too. Two different families, one for headlines and one for body text, mean twice as many files to download, for the same visual effect you can get by just playing with the weight of a single one.
- Two font files total
- The headline stands out by being bolder, not by being a different font
- All the text belongs to the same family, so it always matches
- Four files minimum, two weights per family
- The contrast between headline and body text is sharper
- Risk of a bad match if a designer didn't pick them
Which to pick: Choose a family with two weights almost every time: it's half the file size and it's hard to get wrong. Save the second family for when the business really needs to stand out with style, like a fashion brand or a creative studio, and even then, use just one variant of that second typeface.
The fonts you never pay for or wait on: the system ones
There's an option a lot of people rule out without trying it: using the font that already comes on the phone. It's called the system font, and it never has to download because it's already installed. On an iPhone, it's San Francisco. On Android, it's Roboto.
The text shows up the instant the page loads, no waiting at all. It's not the flashiest option, but it's as fast as it gets, and for a business where the customer just wants to check a price or a schedule, fast matters more than pretty. It's not an ugly font either: it's been on every iPhone for ten years and nobody's ever complained about it.
If your business lives on that first visual impression, a clothing brand, a photography studio, a jewelry store, it's worth paying the weight of a custom font. If you live on being found and chosen fast, an auto shop, a clinic, a neighborhood restaurant, the system font costs you nothing and doesn't make the customer wait.
With the font trimmed down to just what you need, photos, video, and type are all accounted for. What's left is putting the three together and figuring out, when the site is still slow, what gets cut first.
- You know that every weight and style of a font is a separate file the phone downloads before it can show text
- You've decided how many weights your site needs: two, three at most, and from a single family
- You know about the system font, no download at all, and when it's worth using
- You know how to tell when a font is loading twice unnecessarily
Test yourself
Answer before opening each one. If one gives you trouble, go back to the section that explains it.
1. Your site uses Montserrat in regular, bold, light, and italic, plus a second family just for section titles, and it's slow to load with weak coverage. What do you fix first?
The second family and the italic. Stick with one single family and two weights: regular for body text, bold for headings. That alone cuts your font files in half without touching a single photo or video.
2. You run a dental practice and your designer suggests a custom typeface with three weights for a polished look. Do you go with it, or stick with the system font?
Stick with the system font, or at most one family with two weights. A dental practice doesn't run on visual polish, it runs on patients finding the hours and booking fast; speed matters more than a distinctive typeface here.
3. You check your site and notice it's loading two files for the same weight of the same font, one from your design and one that came bundled with the homepage photo carousel. What do you do?
Delete the reference the carousel brought in, not your own. The text looks exactly the same because it's the same font; you just stop downloading it twice.
Photos, video, and fonts are each already lean on their own. If your site still loads slowly, it's time to decide what gets trimmed first when all three add up at once.
In Yodai every site goes live with its padlock, its sitemap and its titles, with nothing to buy or set up. See what the hosting included with your website covers.
NextIf it's still slow, this is the first thing to cut