Digital Marketing
WordPress makes it possible to use a wide range of beautiful, licensed fonts on your website.
Tectalic develops business websites using WordPress, so we’ve had a lot of experience integrating and using fonts. We’ve published this page to help make it easy for you to find and use beautiful fonts on your own site.
Most fonts have different licenses for desktop and web use. Just because you can use a font on your computer doesn’t mean you are licensed to use it on your website.
If there is a specific font you want to use on the web, search for the font name and ‘webfont’ – that will tell you if it is available or not. Don’t be surprised if it isn’t – not all font designers make their fonts available via a web license. If they don’t, you can always drop them a line and suggest they do.
If there isn’t a web licence, well, find an alternative font.
Fonts purchased from MyFonts and FontShop can be purchased for web and desktop. Typekit and Google Fonts are for the web only, so they can be used on your website but not through desktop software.
| Option | Choices | Costs | Link |
| Typekit | Any Typekit font. | Typekit pricing | TypeKit Typekit Fonts by Plan |
| Adobe® Edge Web Fonts | Any Adobe® Edge Web font. | Free | Adobe® Edge Web Fonts |
| FontShop | Any FontShop font with a web license. | FontShop pricing | FontShop |
| MyFonts | Any MyFonts.com font with a +Web license. | MyFonts pricing | MyFonts |
| Google Fonts | Any Google font | Free | Google Fonts |
| Cloud Typography | Fonts from Hoefler & Co | Starts at $99/yr | Cloud.Typography |
| Web Safe | Any web safe font | Free | Web safe |
Some of these options may require some technical integration.
Typekit publishes a wide variety of fonts that can be used on websites. Tectalic has published a WordPress plugin for Typekit that makes it easy to use Typekit fonts on WordPress. In addition to the fonts published on Typekit, you can purchase a web licensed font from FontShop.com and add this to your Typekit account to use on your website.
@font-face is a CSS based approach which allows you to download a particular font from your server to render a webpage if the user hasn’t got that font installed.
Back in the olden days, before font-face, choosing a Web Safe font meant using a font that is already installed on just about all computers using the web. Fonts are specified using a font-family, with the left most font being used if available, otherwise falling back to the next font in the family. Using a generic fallback of serif, sans-serif or monospace means there will always be a font available in every case.
So if you don’t want to do anything fancy, choose one of these fonts and your website will work just fine.
Because of the way font families allow fall backs, various font stacks have been put together that allow you to use a wider range of fonts. This includes fonts that may be available on a wide range of computers, but not all.
Here are some links to articles providing font stacks:
Sometimes, before @font-face was viable, an image replacement approach was used for fonts – prepare an image file for each heading, and upload/display. This is time intensive, and makes it harder to add new content to your website. Really, now that @font-face is here, it isn’t necessary at all.
Prior to the advent of @font-face, a variety of font replacement strategies were tried – sIFR, Cufon and Typeface.js are examples. The use of Flash in some of these solutions means they don’t work on iPhones or iPads. And the licensing framework for these approaches isn’t exactly clear. @font-face is a better option, so no need for these anymore.
When it comes to email, choices are limited to web safe fonts (and font stacks).
We work mostly with Campaign Monitor, and they have a good article showing how different font stacks can be used: Font Stacks Used in Email
Legal | Privacy Policy | Software | Copyright 2007-2024 Tectalic (formerly OM4) | ABN: 71 113 915 601
(08) 9382 8651
Mon-Fri 9am to 5pm (AWST)
9/316 Onslow Rd
Shenton Park
Perth WA 6008
Australia