How to Add Custom Fonts to WordPress Website?

by WP Creative on 2021 February | Posted in WordPress

Custom Fonts WP

Font designs are some of the best ways to attract visitors to your website. They can turn visitors away or convert them into sales.
In this article, we are going to discuss custom font designs and how you can add them to your website to double sales volume and improve business.

Custom fonts usually involve enhanced typography, better user experience, and type kits. They directly impact the brand image of the business.

Some of the best methods to add fonts to your website are through Google Fonts, TypeKit, CSS3@Font-Faced methods.

We will be discussing all of them in detail below.

Can Fonts Slow My Website?

Some people believe that fonts can directly impact site performance. While that is true to some extent, current cache and CDN extensions allow font style deferring. Font deferring delays the site design so that the website performance is not impacted by the font style you use.

Customize Your WordPress Website Through Expert Help. Get In Touch Today

How to Find Custom Fonts for Your Website?

Before we discuss the methods to add fonts to your website, it is important to find custom fonts that you can add. You would be surprised to know that there are many websites available that offer free web fonts to add to your website. Some of these places are Google Fonts, TypeKit, FontSquirrel, and Fonts.com.

All of these websites have free and premium fonts available that you can download directly to your computer. Then, you can add these to your website using FTP, SSH, or cPanel.

There are even websites available that help matching the font design with the color palette you use for your website. One such website is called the Font Pair. It helps designers create attractive matches of website templates and website fonts.

Now let’s discuss various ways to add custom fonts to your WordPress website.

Adding Custom Fonts Using Easy Google Fonts Plugin

You can easily add Google fonts to your WordPress website using the Easy Google Fonts Plugin. The plugin allows website owners to easily add Google fonts to any website without a plugin. It is completely customizable and you can view the fonts on your WordPress website without adding them first through the preview button. It also allows you to easily change the typography of your website and make changes to the fonts added to pages and posts. You can create font rules and change the CSS stylesheets all through the same plugin.

Adding Custom Fonts Using Google Fonts Typography Plugin

Another plugin that you can use to add fonts to your WordPress website without coding is the Google Fonts Typography plugin. It allows you to make changes to your website code using a GUI setup. You can add over 900 fonts to your website and use the Live Customizer preview functionality to see the fonts in action. The font doesn’t require delving into code and works with all top WordPress themes without a problem. The team behind the font plugin is also very supportive and offers timely updates and solutions to your problems.

Make Your WordPress Website More Attractive with Custom Fonts. Get In Touch Today

Manually Add Google Fonts in WordPress

The second approach requires making changes to the WordPress code. If you don’t want to install a WordPress plugin to your website, then you can use the manual method. Here is how to add Google fonts manually.

1. Go to Google Fonts website and find a font that you think will work best on your website. You can preview the fonts in different sizes right on the website.

2. Directly import the code to your WordPress website once you have finalized the font.

embed font

3. You will need to make changes to the functions.php file. Make a PHP function for importing the font. Copy the following code to your functions.php file.

Note: make sure that you properly back up your data before you change the functions.php file. One wrong change can lead to a server error.

<?php
function wpb_add_google_fonts() {
   wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Playfair+Display|Space+Mono|Stint+Ultra+Expanded&display=swap', false );
   }
   
   add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );
?>

Make sure to change the link of the font to the one you have selected for your website.

4. Change the style.css file of your theme. Open it and add the following code to it.

body {
   font-family: 'Stint Ultra Expanded', cursive;
}

h1,
h2,
h3 {
   font-family: 'Playfair Display', serif;
}

button,
input {
   font-family: 'Space Mono', monospace;
}

That’s it. You have successfully added a font manually to your WordPress website.

Adding Custom Fonts in WordPress Using Typekit

If you are interested in adding Adobe fonts to your website, you can add them using Typekit. Typekit is a free font service by Adobe just like Google fonts. It has its own variety of fonts that you can add to your WordPress website simply by signing up with Adobe.

 Adobe fonts

Add the fonts to your WordPress website by adding them to the header section. Simply go to Appearance > Editor > header.php file.
Now, paste the code found on the Typekit font page before the section.

You have declared the fonts. Now you can use them in your site styling by using the following CSS code.

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

Adding Custom Fonts in WordPress Using CSS3 @font-face

If you don’t want to call the fonts from Google or Adobe servers, then the best method is to directly add these fonts on your own server and call them using the CSS3@font-face.

  1. Download the fonts to your local drive and then upload them to the hosting server using FTP, SSH, or cPanel.
  2. Once you have the fonts uploaded to the drive, you need to call them in the stylesheet. Here is the code that you can use.
@font-face {
    font-family: Arvo; 
    src: URL(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf); 
    font-weight: normal; 
}

Just make sure to change the font-family name and url to the font name that you are using.

Once you have the font declared in your stylesheet, you can use it anywhere with the following code.

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

Now you have all the methods available for using web fonts on your WordPress website. With that said, it is still a better option to use fonts directly from the fonts’ server instead of your own for optimal performance. Both Google and Adobe servers are one of the fastest in the world and your website won’t get server interruptions if they are loaded directly from their own servers.

Unable to Customize Website Fonts? Get Help from WordPress Experts!

If you are unable to add customized fonts to your website, our WordPress experts can help you change the design of your WordPress website or create a custom theme for your website – whatever you want to be done – so that you can become more profitable.

Get in Touch Today

Looking for a WP developer?

  • This field is for validation purposes and should be left unchanged.
  • Recent Post

  • Categories

  • © 2018 WP Creative, Naphix Pty Ltd. ABN: 65 610 345 198