custom fonts wordpress plugin, custom fonts demo, cufon fonts wordpress, how to add fonts to wordpress, wordpress font plugin, wordpress font size plugin, install font wordpress, embed font wordpress, singhbazar blogging tips,

How to add custom font in wordpress

Do you want to add custom fonts to WordPress? Custom fonts allow you to use beautiful combinations of different fonts on your website to improve typography and user experience.

In addition to looking good, custom fonts can also help you improve readability, build brand image, and increase users’ spend on your website.

In this article, we will show you how to add custom fonts to WordPress using Google Fonts, TypeKit and CSS3 @ Font-Face method.

Adding Custom Fonts to WordPress

Note: Loading too many fonts can slow down your website. We recommend choosing two fonts and using them on your website. We will also show you how to load them properly without slowing down your website.

Before we look at how to add custom fonts to WordPress, let’s focus on finding custom fonts that you can use.

The most effective method to discover custom textual styles to use in WordPress

Fonts used to be expensive, but not anymore. There are many places to find great free web fonts such as Google fonts, typekit, fontscaler, and fonts.com.

If you don’t know how to match and match fonts, try font pairing. This helps designers put Google fonts together.

As you are picking your textual styles, recall that utilizing an excessive number of custom text styles will hinder your site. This is the reason you should choose two text styles and use them all through your structure. This will also bring stability to your design.

If you do not like the video or like the written guide, please continue reading.

Adding Custom Fonts to Google Fonts from WordPress

Google Fonts Preview

Google Developers is the largest, free and most used font library among website developers. There are many ways to add and use Google fonts in WordPress.

Method 1: Add Custom Fonts Using the Easy Google Fonts Plugin

If you want to add and use Google Fonts on your website, this method is the easiest and recommended for beginners.

The first thing you need to do is install and activate the Easy Google Fonts plugin. For more details, see our step guide on how to install the WordPress plugin.

Upon activation, you can go to the Surat »Customizer page. This will open the live theme customizer interface where you will see the new Typography section.

Customizer typography

By clicking on typography you will see different parts of your website where you can apply Google Fonts. Just click on ‘edit font’ below the section you want to edit.

Typography settings

Under the Font Family section, you can do whatever Google font you want to use on your website. You can choose font style, font size, padding, margin, and more.

Depending on your theme, the number of sections here may be limited and you may not be able to directly change the font selection for many different areas of your website.

To fix this, the plugin also allows you to create your own controls and use them to change fonts on your website.

First, you need to go to the Settings »Google Fonts page and provide a name for your font control. Use something that helps you quickly understand where you will use this font control.

Font control section

Next, click on the ‘Create Font Font Control’ button and then you will be asked to enter the CSS selectors.

You can add HTML components you need to focus (for instance, h1, h2, p, blockquote) or use CSS classes.

You can use the inspection tool in your browser to find out which CSS classes are used by the particular area you want to change.

Add CSS Selectors

Now click on the font save font control button to store your settings. You can create as many font controllers as you want for different sections of your website.

To use these font controllers, you have to type Appearance »Customizer and click on the Typography tab.

Under Typography, you will now also see a ‘Theme Typography’ option. Clicking on it will show your custom font controls you created earlier. Now you can just click the Edit button to select the font and appearance for this control.

Theme Typography Options

Be sure to click the Save or Publish button to save your changes.

Method 2: Add Google Fonts to WordPress Manually

This technique expects you to add code to your WordPress subject documents. If you haven’t done so before, see our guide on how to copy and paste code in WordPress.

First, go to the Google Fonts Library and choose a font you want to use. Next, click the Quick Use button below the font.

Select the font styles you want to use

On the font page, you will see the styles available for that font. Select the styles you want to use in your project and then click the sidebar button at the top.

Get Font Embed Link

Next, to copy the embed code, you must switch to the ‘Embed’ tab in the sidebar.

There are two ways to add this code to your WordPress site.

First, you can edit the header of your content. Paste the code before the <body> tag.

However, if you are unfamiliar with code editing in WordPress, you can use a plugin to add this code.

Just install and activate the Insert Headers and Footers plugin. For more details, see our step guide on how to install the WordPress plugin.

Upon actuation, go to Settings »Insert header and footer page and glue the insert code in the title code in the title code.

Add Font Code to Your WordPress Site

Don’t forget to click the Save button to store your changes. The plugin will now start loading the Google font embed code on all pages of your website.

You can utilize this text style in your subject’s template like this:

1
2
3
.h1 site-title {
font-family: 'Open Sans', Arial, sans-serif;
}

See our guide on adding Google fonts to a WordPress theme for more detailed instructions.

Adding Custom Fonts to WordPress Using Typekit

  Typekit Adobe Fonts

Typetech by Adobe Fonts is another free and premium resource for awesome fonts that you can use in your design projects. They have a paid membership as well as a limited free plan that you can use.

Just sign up for an Adobe Fonts account and go to the Browse Fonts section. From here you need to select a font and click the </> button to create a project.

Add a Typekit font to a project

Next, you will see the embed code with your project ID. It will also show you how to use the font in your theme’s CSS.

You must copy and paste this code inside the &lt;head&gt; section of your website.

Typekit font embed code

There are two ways to add this code to your WordPress site.

First, you can edit the header of your content. Paste the code before the &lt;body&gt; tag.

However, if you are unfamiliar with code editing in WordPress, you can use a plugin to add this code.

Just install and activate the Insert Headers and Footers plugin.

Upon enactment, go to Settings »Insert header and footer page and glue the insert code in the title code in the title code.

Adding typetkit by adobe font in wordpress

That’s all, you can now use the typedec font chosen in your WordPress theme’s stylesheet as follows:

1
2
3
h1 .site-title {
font-family: gilbert, sans-serif;
}

For more detailed instructions check out our tutorial on how to add awesome typography to WordPress using TypeCat.

Adding custom fonts to WordPress using CSS3 @ font-face

The most straightforward way to add custom fonts to WordPress is to add fonts using the CSS3 @ font-face method. This method allows you to use any font you like on your website.

The first thing you need to do is download the font that you like in a web format. If you do not have a web format for your font, you can convert it using the FontSquirrel Webfont generator.

Once you have the WebFont files, you will need to upload it to your WordPress hosting server.

The best place to upload fonts is a new “fonts” folder in your theme or child theme directory.

You can use your cPanel’s FTP or file manager to upload fonts.

Once you’ve uploaded the font, you’ll need to load the font into your theme’s stylesheet using the CSS3 @ font-face rule:

1
2
3
4
5
@font-face {
    font-family: Arvo; 
    src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf); 
    font-weight: normal
}

Don’t forget to change the font-family and URL with you.

You can then use that font anywhere in your theme’s stylesheet:

1
2
3
.h1 site-title {
font-family: "Arvo", Arial, sans-serif;
}

Stacking textual styles legitimately utilizing CSS3 @ text style face isn’t generally the best arrangement. If you are using a font from Google Fonts or Typekit, it is best to serve the font directly from your server for optimal performance.

All this, we hope that this article has helped you to add custom fonts in WordPress. You want to check out our guide on how to use icon fonts in WordPress and how to change the font size in WordPress.