Adding more fonts to your computer is pretty straightforward. Simply download the files to your fonts directory, and then you can start using them in your sofware and applications of choice.
However, if you want to use custom fonts on your website, especially those typefaces that your visitors might not have installed on their devices, it gets a bit more complicated.
Thankfully, as a WordPress user, there are some great free tools you can use to add individual fonts, or a whole library of them to your website. Once you’ve made the fonts available to your theme, you can begin applying them to the various styles in use on your website.
In this article we will show you where you can find high quality free and premium fonts, how to add them to your WordPress website, plus some tools to help you choose the right settings for each typeface on your website.
Where to Find Fonts for Your Website
Before we get to the instructions covering how you can add custom fonts to your WordPress website, let’s take a look at some of the places where you can find new typefaces to modify the appearance of the text on your site.
There are some great free online resources available, where you can find open source fonts that can be used freely throughout your website. Some resources you might like to explore include:
- Google Fonts: browse over 600 open source fonts that have been optimized for the web. Using these fonts on your WordPress website is very easy, as we will cover shortly.
- Font Squirrel: another large repository of free to use fonts.
- Edge Web Fonts: a collection of free web fonts powered by Adobe Typekit.
- Typekit: a professional collection of over 4,000 free and premium fonts from Adobe, for use on the web and in print.
As you can see there are plenty of legitimate online sources of free and premium fonts that you can use to customize the appearance of your WordPress website.
Typography Tools for Web Designers
Choosing the right set of fonts for your website can be difficult. There is more to the process than just choosing one or two fonts that you like, and then adding them to your website.
Not only do you have to take the appearance of the font into consideration, but also the size you will choose, how wide the content area on your site is, and what the optimal line height for each typeface is.
Thankfully, there are some free online tools you can use to help you apply your chosen fonts correctly. This then ensures your content looks its best.
One online resource you should definitely take a quick look at when customizing the fonts on your website, is the Golden Ratio Typography Calculator. This typography tool, from the guy behind the Thesis Framework, lets you enter a font size, followed by the width of your content area. The tool will then calculate the perfect typographical settings for your specific website configuration.
Type Scale is another online tool that makes it easy to establish what size the different text styles on your website should be in relation to each other. After entering your base font size, such as the size of the paragraph text on your site, you will then find out what size each of the different headings should be set to.
There are a number of scales to choose from, including the above Golden Ratio. Once you are happy with the settings, you can quickly copy the CSS for use on your own website.
WordPress Custom Font Plugins
Just as there are many places to find fonts online, there are also plenty of ways to integrate them into your WordPress website. However, to help you get started as quickly as possible, here are some of the best WordPress font-related plugins:
Easy Google Fonts
Easy Google Fonts is a free plugin that gives you the ability to use any of the 600+ free fonts from the Google repository on your WordPress website. The plugin works with the WordPress Customizer tool. This allows you to preview your changes before you make a final decision on which fonts to use where on your site.
After installing and activating the plugin on your website, you can begin changing the fonts used by your current WordPress theme. To do so, head over to the WordPress Customizer tool and click on the Typography section.
Out of the box, the plugin lets you change the typography settings for the main styles in use by your theme. This could include the paragraph and the individual headings. However, through the Easy Google Fonts settings page, you can create custom font controls. These are then added to the Customizer interface, giving you an easy way to change the font used by elements such as lists, quotes, and more.
After you’ve added a custom font control, you can then access it from the Theme Typography settings on the Customizer.
By using this feature of the plugin, you can then modify the fonts used by any of the elements or styles of your WordPress theme. The controls that are added to the Customizer also cover the font weight, text decoration and transform properties, as well as the font colour, background colour, size, line height, and letter spacing.
By combining the custom font controls with the detailed settings on offer, the Easy Google Fonts plugin opens up a whole world of possibilities when it comes to modifying the appearance of the text on your WordPress website, all without the need to edit any code directly.
Use Any Font
The above Easy Google Fonts plugin comes highly recommended. However, it does have one drawback: you can only use the typefaces from the Google Fonts collection. If none of those 686 fonts appeal, or you want to use a custom typeface, then the equally free Use Any Font plugin is a good alternative.
After installing and activating the plugin, you can upload one or more fonts to your website, directly from your computer. However, before you get started, you must sign up for the free API key (or make a donation), which will connect the plugin to the font conversion tool.
Once you’ve uploaded at least one font, you can then assign it to the specific elements of your website. This includes the list of default elements, as well as any custom elements you define.
The plugin also adds some font controls to the WordPress post editor. This makes it easy to change the fonts used in your posts and pages, on an individual basis, rather than globally.
After assigning a font, you can view the changes to your typography by visiting the front end of your website. While the controls of this plugin don’t compare with those on offer from the Easy Google Fonts plugin, if you just want to change the fonts used by the specific elements of your theme to a custom font of your choice, then Use Any Font does the job nicely.
Typekit Fonts for WordPress
If you want to use the free and premium fonts from the Adobe Typekit service on your WordPress website, then the free Typekit Fonts for WordPress plugin is for you.
With this plugin, you can either use the predefined selectors, or add your own custom CSS rules. This ensures that whatever part of your website you want to personalize with a Typekit font, you are free to do so with this plugin.
Adding Custom Fonts to WordPress By Hand
If for whatever the reason, the idea of using one of the above free plugins doesn’t appeal, you can always change the fonts used on your WordPress website by hand. If the font you want to use can be found in the Google Fonts repository, then adding it to your website is very easy.
All you have to do it select the font on the Google website, and then copy the relevant code into the head section and the CSS stylesheet of your website.
However, if your font of choice isn’t hosted in a repository like Google Fonts, where you can simply link to it, then you will need to host the font yourself. This changes the process slightly and adds a few extra steps, such as uploading the font to your server.
You can upload the font file using FTP software, or the file manager tool in the control panel of your web host. It’s a good idea to upload the font to a dedicated fonts directory, preferably in your child theme folder to help keep things organized.
Once the font file is on your server, open up your themes CSS stylesheet file for editing. This can be done from within your WordPress admin dashboard, on the Appearance > Editor screen.
Once you’ve added the above CSS to the stylesheet to load the font, you can then use it anywhere in that CSS file to modify the appearance of the text as below:
For performance reasons, where possible, you should try to link to an external font repository such as Google Fonts. However, if you can’t find the font you want to use online, you may have to sacrifice some of your page speed by hosting the file yourself.
Conclusion
Hopefully you now know where to find custom fonts, as well as how to start adding them to your WordPress site. By using one of the free plugins, such as Easy Google Fonts, you can start changing not only the fonts that are used on your website, but also how those typefaces are presented.
Thanks to the WordPress Customizer tool, you can now easily make changes to the appearance of the text on your website. This all takes place through a set of visual menus, complete with a live preview.
If your current theme doesn’t give you much control over which fonts are used on your site, by using one of the above methods, you’ve now got an easy way to make those changes, without editing any of the underlying CSS yourself.
What are your favourite fonts? What typography settings on your website do you want to change? If you have any questions about fonts, typography, or WordPress in general, please share them in the comments below.