Would you like to learn how to add custom fonts to a WordPress website?

Why make your blog boring by using standard fonts? Let your blog speak about your vibrant personality and the topics you cover with a wide variety of custom fonts. Custom fonts are a cool feature that makes your blog look preferable to others.

Let's face it; we all love blogs and websites with the right fonts. They not only decorate the website but also help attract the user to your content. However, the choice of standard WordPress fonts is limited and depends on the theme you are using. The good news is that you can add them manually or with WordPress plugins specialized.

And here two questions arise: where to get custom fonts for WordPress and how to install custom fonts on your website.

Let's find out.

Why should I use custom fonts?

Gone are the days when Times New Roman and Georgia were considered the only typefaces for text on websites. Over the past few years, the font space has completely changed with the advent of fonts such as Google Fonts and others.

Today, there are hundreds of free fonts, information and training aids, and design resources available on the Internet. Unlike Adobe Illustrator, Photoshop, and other classic apps, WordPress doesn't give you full control over default fonts. Only certain WordPress themes choose to support and use custom fonts.

Therefore, in this article, you will learn how to find suitable custom fonts and use them on your WordPress website.

The importance of using custom fonts

Why change fonts, word indent, line spacing, letter spacing, or font saturation, you ask? However, some studies show that typography improves reading comprehension.

Much depends on the construction of the fonts. At a conscious and subconscious level – everyone evaluates the content of a web page by design.

Font design affects readers, even if they don't pay attention to it. Giving up on font design means giving up on development itself! The reader's mood depends on it. The font makes it easier to read or forces users to leave the page.

All web browsers include a set of default fonts. This means that if the font is not specified in the CSS of the page, the standard version will be used. You can still use the default fonts, but they make it harder for users. This is why it is essential to use a custom font. If your WordPress theme doesn't give you options to change the font, there are plenty of websites and tools that can help.

Google Font Alternatives

add custom fonts

Many of you know the Google fonts. There are many more websites where you can find beautiful fonts. Some of them are free for personal use. If you need commercial use, you will need a license. Google Fonts and Adobe Edge Fonts are free. This is why they are not so unique.

here are some other resources for finding fonts for free and commercial use:

  1. Template Monster — On the TemplateMonster website you will find everything you need for web design. There are also many fonts and font packs for personal use for a small price. In addition, To help you choose, all fonts presented on brochures or frames. Each font is also presented with a commercial license.
  2. MyFonts — MyFonts currently offers the largest selection of fonts in the world. However, the prices here are also in the upper segment. So if you are on a tight budget this might not be for you.
  3. FontSpring — Fontspring sells novelty fonts for commercial use. But in almost every family, 1-2 free fonts can be used for personal purposes. Also, there is a separate section with free fonts. The collection is vibrant. But you will need to carefully study the license information for a particular font before downloading.
  4. cufonfonts — It is also a huge collection of different fonts. Select any one, and you will see a page with detailed information about it. There are plenty of free fonts, and they are divided into individual sections. The sorting system on CufonFonts is quite flexible and convenient. Also, Webfont support is included.
  5. Dafont — Another accessible collection of 3 free fonts. Most of them are designed for personal use only. A cool DaFont feature is a category system. You can select fonts in the style of comics, video games, vintage etc….

The choice of fonts is very tempting because they are all beautiful. But you shouldn't choose a lot. Do not use more than two fonts on a site web. Then theappearance of your website will be consistent. Once you've chosen your fonts, be sure to upload the files for each style you'll be using (regular, bold, italic, etc.).

Now that you've selected the appropriate font for your website, let's find out how to add it.

How to Add Custom Fonts to WordPress

There are several ways to add fonts to a WordPress website:

  1. Plugins : in this case, different WordPress plugins are used to facilitate the process.
  2. Manually : using this method, you need a font download downloaded from the site and modify the CSS file.
  3. Themes:: Many popular themes have built-in options to customize your fonts (note – we won't cover this option as the process will vary depending on the theme you're using.

Option 1 – Change WordPress Fonts with Plugins

If we don't care about global changes, we can install WordPress plugins which will change the fonts on your website.

Features of Custom Font Plugins

Open source software has an advantage for community interest, and WordPress has that advantage as well. Several WordPress plugins allow you to add custom fonts. How to choose an appropriate plugin when there are so many? What are the features of custom font WordPress plugins?

Here are some points to consider:

  • Ability to use a custom font
  • Ability to use multiple fonts
  • Headers and target components
  • Bonus: the ability to change font settings from the visual editor

That's all. The first characteristic in the list is very important. You can still download fonts from websites like DaFont, Font Squirrel, etc., but you need to be able to upload them to WordPress.

Let's look at some plugins for WordPress that allow you to upload custom fonts.

1. Better Awesome Font

This WordPress plugin will allow its users to automatically combine the latest version of Better Font Awesome fonts with the CSS, shortcodes and more. In addition, this WordPress plugin is updated automatically.

Better font awesome - best WordPress typography plugins

You will find as features: regular updates, a shortcode generator, compatibility with other WordPress plugins, etc ...

Download | Demo | Web hosting

2. Google Fonts for WordPress

This WordPress plugin consists of 877 special fonts, which will allow you to use all the fonts on your WordPress websites. Thanks to its real-time preview, it will allow you to see what your website will look like once the font is applied. 

Google fonts - best WordPress typography plugins

In addition, you will be able to save it and edit it on the frontend when you find the combination you will enjoy.

Its features include: a real-time preview, a quite advanced SEO, multilingual support, support for more 870 + Google Fonts, easy updates and more.

Download | Demo | Web hosting

3.Fonts Plugin

Fonts Plugin is a free WordPress plugin that allows users to access Google Fonts and Adobe Fonts libraries. With this WordPress plugin, you can choose from over 1000 Google and Adobe fonts, use multiple fonts on your website, and test different options with the plugin's real-time preview feature in the WordPress customizer.

best wordpress typography plugins

For more ways to customize your website typography like font size, letter spacing and line height, you can upgrade to the premium version, Fonts Plugin Pro.Download | Demo | Web hosting

4. Easy Google Fonts

Easy Google Fonts is one of best WordPress plugins to customize the typography of your website. Like Fonts Plugin, it lets you choose from hundreds of Google Fonts and preview them in the Customizer before adding them to your website.

10 WordPress typography plugins for your blog

Although it provides access to a smaller number of Google Fonts, it is unique in that it allows you to create custom font controls and rules in the admin area, which will immediately appear in the WordPress customizer.

Download | Demo | Web hosting

Option 2 – Manually Install WordPress Custom Fonts

Using the @font-face directive, you can connect one or more fonts to your website. But this method has its pros and cons.

Benefits:

  • Thanks to CSS, you can connect fonts of any format: ttf, otf, woff, svg.
  • Font files will be located on your server – you won't depend on third-party services.

Drawbacks :

  • For the correct font connection for each style, you must register a separate code.
  • Without knowing CSS, you can be easily confused.

But it's not a real problem if you can just copy a finished code and where you need to specify your values.

Please note: : Before you begin, be sure to create a child theme for your website. This way you can make all changes to your child theme, leaving your main theme so you can easily update it if needed in the future.

Step 1: Create a “fonts” folder

In your child theme, create a new “fonts” folder under: wp-content/themes/your-child-theme/fonts

Step 2. Upload the downloaded font files to your website

This can be done via your hosting control panel or via FTP.

Add all font files to the newly added fonts folder: wp-content/themes/ In your child theme, create a new “fonts” folder under: wp-content/themes/your-child-theme/fonts that you created.

Step 3. Import fonts via child theme stylesheet

Open the file style.css of your child theme and add the following code at the beginning of the CSS file (after the child theme comment):

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

Or MyWebFont is the name of the font and the value of the src property (the data in parentheses in quotes) is their location (relative links). We need to specify each style separately.

Since we connect the normal style first, we set the font-weight and font-style properties to normal.

Step 4. When adding italics, write the following:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

When everything is the same, we are the only ones to attach the font style property to italic.

Step 5. To add the bold font, add the following code:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

Where we set the font-weight property to bold.

Remember to specify the correct location of the font files for each style.

Step 6. To connect bold italics, type the following:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

Well, that's it. Now that you have connected four font styles to your website.

But there is one note: this font connection will not display correctly in Internet Explorer 8. The consolation is that there are very few people still using IE8.

Other recommended resources

We also invite you to consult the resources below to go further in the grip and control of your website and blog.

Conclusion

What is the first thing users notice when they visit your website? That's right, its design! Most of the design relies on proper use of beautiful fonts. So, you need to take care of your website font design. Add code or use one of the plugins mentioned above to embed a new font style. How you choose it is up to you.

Make sure you don't use more than two fonts on the same website. Since the more custom fonts you add to the website, the more the website speed will drop.

That's it for this article that shows you how to add custom fonts to a WordPress website. We invite you to try. If you have any concerns or suggestions, please let us know within Comments.

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

Waiting, share this article on your different social networks.   

...