WordPress makes it possible to use a wide range of beautiful, licensed fonts on your website.
OM4 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.
Desktop vs Web Fonts
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.
Sources of Web Fonts
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.
|Typekit||Any Typekit font.||Typekit pricing||TypeKit|
|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.
More about Typekit or other @font-face based services
Typekit publishes a wide variety of fonts that can be used on websites. OM4 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.
Use Web Safe Fonts
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.
- Georgia, serif
- “Palatino Linotype”, “Book Antiqua”, Palatino, serif
- “Times New Roman”, Times, serif
- Arial, Helvetica, sans-serif
- Arial Black, Gadget, sans-serif
- “Comic Sans MS”, cursive, sans-serif
- Impact, Charcoal, sans-serif
- “Lucida Sans Unicode”, “Lucida Grande”, sans-serif
- Tahoma, Geneva, sans-serif
- “Trebuchet MS”, Helvetica, sans-serif
- Verdana, Geneva, sans-serif
- “Courier New”, Courier, monospace
- “Lucida Console”, Monaco, monospace
Use Font Stacks with fall backs to web safe fonts
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.
Other font replacement approaches for websites
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.
Fonts in Email
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
Other WooCommerce Extensions by OM4
- A Designer’s Guide To WooCommerce
- Integrating WooCommerce with the Cloud using Zapier
- WooCommerce, Deliverability and Transactional Email Integration
- Error Free Order Processing in Your WooCommerce Store
- Stripe vs PayPal Payments
- Offline Credit Card Payments in WooCommerce
- Launch Your Online Store With Your Best Sellers
- Preventing Errors In WooCommerce Order Fulfilment
- Boost Your WooCommerce Store’s Conversion Rate
- Include A Blog In Your WooCommerce Store Design
- Our New WooCommerce Order Management Plugin
- WooCommerce Geolocation and WP Engine
Enter your details below to receive our latest WooCommerce articles via email.
It's a great way for WooCommerce store owners and WooCommerce developers to stay informed about everything WooCommerce related!