Custom font: How to add it to make your WordPress website unique

Typography is more important than most people give it credit for. The fonts you use not only impact your website’s presentation, but they can also make it stand out from other sites and render your content easier to read. Using a safe, normal and easy-to-configure font can be such a great choice for your site. However, sometimes having a custom font be much better, due to the boredom that customers have when reading your article.

Custom font for WordPress
Custom font for WordPress

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, based on the purpose of your project. Apart from looking good, custom fonts can also help you improve readability, create a brand image, and increase time users spend on your website. So now, we would like to show you guys how to add your custom font to your WordPress website.

But first, let’s go through the definitions.

What is “Custom font”?

The term “custom font” is quite broad. Since we’re talking about WordPress, however, we’ll use it to refer to any typeface the CMS doesn’t include out of the box. There are thousands of font options that you can find online, and in general terms, nothing is stopping you from using any of them. However, you should use the font that should be compatible with your WordPress website.

How to add your custom font to make your WordPress site unique?

When it comes to custom fonts, WordPress provides you with several ways that you can implement the options you want. Let’s go over what each involves, so you can select the method that works best for you.

Method #1: Adding custom font using Google Fonts plugin

If you want to add and use Google Fonts on your website, then this method is by far the easiest and recommended for beginners. First thing first, you need to install and activate your own Google Fonts plugin. Upon activation, you can go to Appearance -> Customizer page. This will open the live theme customizer interface where you’ll see the new Typography section. Under the font family section, you can choose and configure any custom font you like.

Depending on your theme, the number of sections here could be limited. Also, you may not be able to directly change 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. You can add HTML elements you want to target (for instance, h1, h2, p, blockquote) or use CSS classes.

Method #2: Manually add custom font on your WordPress website

This method requires you to add code to your WordPress theme files. First, visit the Google fonts library and select a font that you want to use. Next, click on the quick use button below the font. On the font page, you’ll see the styles available for that font. Select the styles that you want to use in your project and then click on the sidebar button at the top. Once you do that, a new menu will appear that includes two snippets of code. They should look like this:

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
font-family: 'Roboto', sans-serif;

There are two ways you can add this code to your WordPress site. First, you can simply edit your theme’s header.php file and paste the code before the <body> tag. However, if you are unfamiliar with code editing in WordPress, then you can use a plugin to add this code. You can use this font in your theme’s stylesheet like this:

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

Method #3: Adding custom fonts in using Typekit

Typekit is another free and premium source of the custom font for your website. You can use them in your design projects. They have a paid subscription as well as a limited free plan that you can use. Simply signup for an Adobe Fonts account and visit the browse fonts section. From here you need to click on the </> button to select a font and create a project. 

Using Typekit to add your custom fonts into your site
Using Typekit to add your custom fonts into your site

Next, you’ll see the embed code with your project ID. It will also show you how to use the font in your theme’s CSS. You need to copy and paste this code inside the <head> section of your website. There are two ways you can add this code to your WordPress site. First, you can simply edit your theme’s header.php file and paste the code before the <body> tag. However, if you are unfamiliar with code editing in WordPress, then you can use a plugin to add this code.

You can use this font in your theme’s stylesheet like this:

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

Method #4: Adding font using CSS3 @font-face

The most direct way of adding custom fonts in WordPress is by adding the fonts using the CSS3 @font-face method. This method allows you to use any font that you like on your website. So, the first thing you need to do is download the font that you like in a web format. If you do not have the web format for your font, then you can convert it. Once you have the web font files, you would need to upload it on your WordPress hosting server.

The best place to upload your custom font is inside a new “fonts” folder in your theme or child theme‘s directory. You can use FTP or also File Manager of your cPanel to upload the font. Once you have uploaded the font, you need to load the font in your theme’s stylesheet using CSS3 @font-face rule like this:

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

Don’t forget to replace the font-family and URL with your own.

Final words

That should be it! Here are some of the greatest methods on how to add your custom font to make your WordPress site much more unique. Most of the store’s design relies on the proper use of beautiful fonts. So, you have to take care of the font design of your site. To clarify, you should add code or use the plugins mentioned above to embed a new custom font style. Which way you choose it is up to you. Moreover, don’t forget the best development services that ArrowHiTech provide to your business. Besides that, you can tying your problems into this CONTACT FORM if you have any trouble in your project.

Tags

Share