WordPress makes it possible to use a wide range of beautiful, licensed fonts on your website. Tectalic builds business websites on WordPress, so we’ve done a lot of this — here’s what you need to know.
Desktop fonts vs web fonts
Most fonts have separate licences for desktop and web use. Just because a font is installed on your computer doesn’t mean you’re licensed to use it on your website.
If there’s a specific font you want on the web, search for the font name plus “web font”. That’ll tell you whether a web licence exists. Don’t be surprised if it doesn’t — not every foundry offers one. If there’s no web licence, pick an alternative.
Where to get web fonts
| Source | What you get | Cost |
|---|---|---|
| Google Fonts | A large open-source library | Free |
| Adobe Fonts | Thousands of fonts, included with a Creative Cloud plan | Included with Creative Cloud |
| Fontshare | A growing free library of quality fonts | Free |
| MyFonts / Monotype | Commercial fonts with web licences | Paid |
| Font Bureau / Type Network | Premium type | Paid |
| Web-safe / system fonts | Fonts already on most devices | Free |
Some of these need a little technical integration; Google Fonts and Adobe Fonts are the easiest to drop into most WordPress themes, and many themes now include a font picker.
A note on privacy: if you’re serving Google Fonts, consider self-hosting the font files rather than loading them from Google’s servers. Self-hosting is faster and sidesteps the data-protection questions that come with third-party font requests.
How web fonts work
Web fonts use the CSS @font-face rule: the browser downloads the font file it needs to render the page, so your visitors see your chosen font even if it isn’t installed on their device. This is the standard approach today and is well supported everywhere.
Web-safe fonts and font stacks
You don’t have to use a downloadable web font. A web-safe font is one already installed on almost every device. Fonts are specified as a font stack — a list where the browser uses the first available font and falls back to the next. Ending with a generic family (serif, sans-serif or monospace) guarantees something sensible always renders.
Common web-safe options:
Serif
Georgia, serif"Times New Roman", Times, serif
Sans-serif
Arial, Helvetica, sans-serif"Trebuchet MS", Helvetica, sans-serifVerdana, Geneva, sans-serifTahoma, Geneva, sans-serif
Monospace
"Courier New", Courier, monospace"Lucida Console", Monaco, monospace
Even when you use a custom web font, it’s good practice to list web-safe fallbacks after it, so text still looks right if the web font is slow to load.
Fonts in email
Email is far more limited than the web — most email clients ignore web fonts, so stick to web-safe fonts and font stacks for newsletters, with a sensible generic fallback.
Want a hand choosing and setting up fonts that match your brand? Talk to us — typography is part of every site we build.