How to Add Custom Fonts in WordPress

Custom fonts can help you freshen up your theme and stand out your website. In this article, we will show you how to add custom fonts in WordPress.  There’s different ways you can add your custom fonts depending on your theme and where you get the fonts from.
Note: As you are picking your fonts, remember that using too many custom fonts will slow down your website. This is why you should select two fonts and use them throughout your design. This will also bring consistency to your design.

Install custom font using plugins

Here are some recommend plugins you can choose from to install your custom fonts depending on which fonts you choose:

  • Install this plugin when using Typekit fonts
  • Most popular plugin for adding Google’s web fonts to WordPress.
  • Support for web fonts from the Fonts.com web fonts collection out of the box.
  • Upload any font file types (otf and .ttf) and this plugin will embed them into your site using the CSS rule, @font-face

Install Google Fonts manually

In fact, there are many premium themes that come fully loaded with hundreds of custom fonts. However, loading too many fonts can slow down your website. That’s why we are going to show you how to properly load custom fonts, so it doesn’t slow down your site.

Fonts used to be expensive, but not any more. There are many places to find great free web fonts such as Google Fonts (https://fonts.google.com/), Typekit, FontSquirrel…  There’s also different ways to install your custom fonts manually.

  • Using PHP Code
  • Import – This is used in your child themes style.css file.
  • Javascript
  • Using a plugin

But here we focus on showing you to How to Add Custom Fonts in WordPress from Google Fonts by the most basic solution that @import rule, you don’t need to upload the font files to your server which is what you would do if your fonts are premium or custom web fonts.

Google fonts is an awesome free resource to add beautiful typography in your design projects. WordPress users can add custom Google fonts on their websites. You simply visit the Google fonts library and select a font that you want to use. Then click on the quick use button below the font.

This will take you to another page where you will be asked to choose the styles you want to use. You should only select styles that you think you will actually use. After that scroll down a little until you get to the embed code section. You need to copy the embed code under the standard tab.

import-font

Open your child theme’s style.css file and simply add this code to the start of it:

Once you’ve imported the fonts, now you can then use them in your theme by editing your child theme’s style.css file like this:

 That’s all you have successfully added a custom Google font in your WordPress site.

Using Fonts In Your Editor

You can also install Google or any other fonts for use in your visual editor. This can be done by installing a plugin for this purpose or you can enable the hidden features like fonts styles in your visual editor.
Enabling the hidden features will activate a limited amount of font styles and sizes which are included in your editor files.
Adding custom fonts to your editor manually is beyond this post and something i will cover shortly in another post.
This way you can use the fonts with different heading sizes on a per page/post basis rather than site wide.

———–

Hopefully this article gives you a basic understanding of how to add custom fonts into WordPress site. See you again in other instructions 

 

Leave a Reply

Your email address will not be published. Required fields are marked *