If you want your website to truly stand out from the crowd, then using custom fonts will help you achieve this. There are thousands of beautiful custom fonts to choose from, and by selecting the right ones for your project, you will be able to create a website that is not only unique but that also reflects your style and branding. So how do you add custom fonts to WordPress?
In this article, we will cover everything you need to know about applying custom fonts to your website. This includes:
- Where to find custom fonts
- How to add Google Fonts to your website using the plugin Easy Google Fonts
- Adding Google Fonts to your website manually (no plugin required)
- Adding Adobe Fonts to WordPress
- How to Add Any Custom Font to Your Web Space
Ready to get started?
Where Can You Find Custom Fonts?
Nowadays, many premium WordPress themes ship with a plethora of custom fonts. However, these can often increase theme bloat, and impact your website’s load times more than you would think. You will also find that you actually only ever use a couple of custom fonts at most, so the majority of fonts that your theme provides will never be needed.
Therefore, we recommend choosing a lightweight WordPress theme, which you can then add custom fonts to when necessary. There are a number of places where you can find the right custom fonts for your website. Let’s take a look…
- Google Fonts – The most popular choice, Google Fonts, offers a free directory of over 900 open source designer fonts that can be used in over 135 languages. These fonts can be quickly browsed and then seamlessly integrated into any web design project.
- Adobe Fonts (Previously known as Typekit) – Although Typekit offered both free and premium versions of its service, now rebranded as Adobe Fonts, you will need to sign up to the paid Adobe Creative Cloud package to access this resource. There are thousands of fonts to choose from, all fonts are licensed for personal and commercial use, and you can also select from project-themed font packs, which are perfect for those who lack an eye for design.
- Font Squirrel – In the Font Squirrel library you will find a mixture of free and premium fonts, the latter that can be bought as one-off purchases. Again, you can choose from thousands of high-quality fonts, the majority that are free and commercially licensed.
- Fonts.com – Providing over 150,000 desktop and web font products, Fonts.com contains an impressive collection of premium custom fonts. You will also find an assortment of interesting articles on the Font.com blog, sharing typographic tips and techniques.
- FontPair – Offering a slightly different experience to the other resources, FontPair couples together fonts from Google Fonts, helping you find the right combinations of fonts for your website.
So, now you know where to find custom fonts. Let’s next look at how to add Google Fonts to your WordPress website.
How to Add Google Fonts to WordPress Using the Plugin Easy Google Fonts
As Google Fonts is the most popular resource for custom fonts, we will start by looking at how to add a font from this library to your website. There are a number of ways to do this, but the quickest and easiest option is to use the WordPress plugin Easy Google Fonts.
Easy Google Fonts is a free WordPress plugin that will enable you to insert custom fonts into your WordPress website, without having to touch a line of code. Integrating with the WordPress customizer, this plugin will allow you to insert and use Google fonts on the front-end of your website in real-time, without having to refresh the page.
So let’s now find out how to install and use this plugin.
Step 1: Install Easy Google Fonts
To get started with Easy Google Fonts, open your WordPress dashboard and select Plugins > Add New from the menu.
Then type Easy Google Fonts into the search function, and once the plugin has been retrieved, click on Install > Activate.
You will now find Easy Google Fonts under Settings in your WordPress menu.
Step 2: Edit Fonts in the WordPress Customizer
Once you have installed Easy Google Fonts, from your WordPress menu select Appearance > Customize. Your website will now open on the front-end, where you will find a Typography section has been added to the customizer.
Click on Typography. You can then select the different areas of your website where you would like to apply a custom Google Font (e.g. paragraph, Header 2, Header 3, etc).
Under the section you want to edit, click Edit Font. You can then select the font you would like to use – you will be able to preview how each font looks directly on your website.
Not only can you alter the font type, but you can also change the color, size, positioning, and much more. Once you are happy with your new font, click Publish.
Step 3: Create Custom Font Controls
Easy Google Fonts default controls will allow you to alter the fonts of paragraph sections and headers 1-6. However, not all elements of your theme are manageable by the default font controls.
If you want to alter a different element of your theme (other than a paragraph or header), then you will need to create your own custom font controls. Although Easy Font Control enables you to easily do this, you will still need a basic understanding of CSS selectors.
To add custom font controls, select Settings > Google Fonts from your WordPress dashboard. Then, in the Edit Font Controls tab, give your new font control group an appropriate name, and then select Create Font Control. Here we will create a font control for blockquotes…
Under Add CSS Selectors, add the CSS selector for the element you would like to manage. You can add more than one element if you wish. Then select Save Font Control.
Back in the Customizer on the front-end of your website, under Typography, you will now find the option Theme Typography, where you can access your new custom controls.
You can now select a new custom font for the specific custom element and change any other Appearance and Positioning settings.
Easy Custom Fonts is a great option for anyone wanting to add custom fonts to WordPress from Google. However, if you prefer, you can also manually add Google Fonts to your website using just code, no plugin. Let’s find out how to do this…
How to Manually Add Google Fonts to WordPress (no plugin required)
If you would rather add Google Fonts to WordPress manually, then you will need a very basic knowledge of coding.
Step 1: Select a Google Font
To get started, open Google Fonts, and select the custom font type that you would like to add to your website.
Then on the font’s page, click on Select this Font. Here we have selected the font Indie Flower.
A popup will now appear on your screen. Depending on the font you have selected, you will be able to access a selection of customization options for font weights and styles, as well as view the embed info.
Step 2: Embed the Custom Font’s Code in your WordPress Website
Next, you will need to copy the Embed code (see popup above) and paste it into the <head> section of your WordPress theme. The easiest way to do this is to install the free WordPress plugin Insert Headers and Footers. Using this plugin you can quickly add code to your website without having to edit your theme files.
After installation, open the plugin settings by selecting Settings > Insert Header and Footers from your WordPress dashboard. You then need to add your Google Fonts embed code into the Header section.
Equally, if you would rather you can edit the header.php file of your child theme.
Step 3: Apply the New Font Using CSS
Once you have added the HTML code for your custom font to your website, you can now use CSS to apply your new custom font. In the Google Fonts popup, you will find the CSS rules that are specific to your new font.
Back in the Customizer on the live-side of your website, select Additional CSS. Here you can enter CSS code to customize the fonts on your site. Below you can see we have applied the Indie Flower CSS code to the header 2 and paragraph sections…
The Customizer will show you the font alterations in real-time, and if you are happy with the results, click Publish.
How to Add Adobe Fonts to WordPress
If you have signed up for the Adobe premium Creative Cloud package, then you will be able to add any of its custom fonts to your WordPress website. This process is very similar to that of manually adding Google Fonts to your site. Let’s take a quick look.
Step 1: Choose an Adobe Font
First things first, you will need to browse Adobe’s extensive font library and choose a font/s that will fit with your project. Once you have made a selection, click on the </> icon to add the font to a new Web Project.
You will now be asked to name your Web Project, as well as use the checkboxes to select the font weights and styles that you want to include. Then select Create Project.
Step 2: Embed the Adobe Font’s Code in Your WordPress Website
The next step is to embed the code that Adobe provides for your chosen font into your WordPress website.
This follows exactly the same process as embedding the Google Fonts code. Simply embed the code into the <head> tag on your website or use the WordPress plugin Insert Headers and Footers (as previously discussed).
Step 3: Apply the New Font Using CSS
Again, like Google Fonts, you can now apply your new Adobe custom font using CSS rules. In your Adobe dashboard, your Web Project page will list the CSS font-family name, as well as font style and numerical weight, for each font type you selected.
Back on your WordPress website, these CSS rules can be used within the Customizer under Additional CSS.
So now we have covered how to add custom fonts to WordPress using the vastly popular free Google Fonts as well as the impressive premium resource Adobe Fonts.
However, the last option we will discuss enables you to add any custom font to your website by uploading it to your site’s server. Let’s find out more.
How to Add a Custom Font to Your Web Space
Adding a custom font to your web space is relatively straightforward, but again, you will need a basic understanding of CSS to apply the font to your website.
Step 1: Download a Custom Font
As mentioned at the beginning of this article, there are numerous resources where you can select free or premium custom fonts to use on your website. When choosing a custom font at add to your server, just make sure you have the right to use it, and that it is downloadable.
Here we have downloaded the free custom font Milkshake from Squirrel Fonts.
It is important to download your custom font in a webfont format. The webfont container format WOFF enjoys the most cross-browser support, but Google recommends delivering multiple formats to provide a consistent experience for users across devices.
If you need to convert your custom font into a different format, then Squirrel Font provides a free Webfont Generator tool that will enable you to do so.
Step 2: Upload the Custom Font to Your Server
The next step is to upload your custom font to your server. To do this, open the File Manager in your site’s cPanel.
Then within your active themes folder, create a new folder named Fonts and upload your custom font here.
If you have multiple formats of your font, then upload them all to the Fonts folder. Your custom font has now been added to your web space.
Step 3: Use CSS to Apply the Custom Font to Your Website
You now need to apply the custom font to your website. To start with, you need to load the font in your theme’s stylesheet. To do so, open the WordPress Customizer and under Additional CSS add this code:
@font-face {
font-family: Milkshake;
src: url("https://jonesblogs.com/wp-content/themes/beautiful-pro/fonts/milkshake.woff")
format("woff");
}
Importantly, make sure you change the font name and the URL (copy the URL for the font file on your server).
You can then go ahead and use CSS rules to update the fonts on your site. Here’s an example of how to apply the custom font to Header 3 and paragraph sections:
Once you are happy with how your new custom font looks on your website, click Publish.
Final Thoughts on How to Add Custom Fonts to WordPress
As you can see, if you are looking for a beautiful and attention-grabbing custom font, then there are numerous resources that will enable you to find the perfect font for your project. And what’s more, you are now armed with the knowledge of how to successfully add custom fonts to WordPress. So, which custom fonts will you choose?
Have any questions on how to add custom fonts to WordPress? Please ask away in the comments below…
2 Comments
Hi,
Thanks for the super helpful guide. Just one observation. When embedding the Adobe web fonts code into my WordPress site using the Install Header and Footer Plugin, it didn’t work for me until I removed the “script” tags you showed in your illustration from around the code that Adobe generated. Your illustration was for Google and you just referred to ‘the above’ in the Adobe part so maybe the “script” tags are necessary for Google? Either way, I got the font display working so thank you!
You are quite right, the “script” tags are unnecessary for both the Adobe and Google snippets. We’ve updated the screenshots to reflect this. Glad you got it working!