How to Add Custom Fonts in WordPress

Using custom fonts in WordPress themes has become a modern trend. A good topography can give fresh and new look to your entire theme’s style. Styling is incomplete without integrating custom fonts through code snippet embeds. So it has become popular choice among developer. Just a few years ago developers were limited to working with “web safe” fonts. In those days site owners simply could not use custom fonts because their visitor’s computer did not support it. Now time has changed, every website owners can work with custom font and be sure that those fonts will display correctly across all screen sizes and devices. In recent years free fonts and typekits have become more readily available for designers and website owners. In this article we will discuss how to add custom fonts in WordPress.

How to Add Custom Fonts in WordPress

Adding custom font has become relatively simple with CSS3. You just have to upload a font to your server, then add it to your theme with a very few snippets of CSS. However, loading too many fonts can slow down your website. In this article we will be showing you how to properly load custom fonts, so it doesn’t slow down your site.

Choosing the right font is the first important step required for any website attractive. There are many great resources to find great free web fonts such as Google Fonts, Typekit, FontSquirrel, and fonts.com. Not all free fonts can be used for commercial purposes. However, many font resources like Typekit allow you to buy premium fonts for commercial use.

  Adding Custom Fonts in WordPress from Google Fonts

Google font is the primary resource for adding open-source fonts. Here is the step by step guide for adding font of your choice from hundreds of fonts.

1. Find the Right Font

Simply visit the Google fonts library and select a font that you want to use. You can also search for any theme by its name.

If you don’t have a font in mind to use you can use the Google’s filter options that can help you select the right theme.

Category 

  • Serif (Fonts that little lines at the end of their strokes, e.g. Times New Roman)
  • Sans-Serif (Simple fonts without extra lines, like Torque is using)
  • Display (To be used in larger sizes, such as for headings)
  • Handwriting (Fonts that imitate handwriting)
  • Monospace (All characters have the same spacing)

Style

  • Thickness (Very thin to very thick)
  • Slant (Straight to slanted)
  • Width (Narrow to wide spacing between characters)

Language (for other than the Latin alphabet)

In this article we will be using a common font Open Sans.

2. Select your font

When you find the right theme you can add it your selection list for using it. Simply click the plus sign in the top left corner to select the font. This plus sign allows you to select and use multiple family in a single shot.

You can also experiment by typing your custom text and give some styling to see how it looks.

Once you are done selecting font click the selected box bar at the bottom of the page. This should show the list of selected font family in a window.

3. Choose Font Styles

After selecting the font using above steps will take to a box where you can do the font styling. The style comes in various thicknesses from light 300 to extra bold 800. Click the customize link and choose the styles that you will need in your website.

4. Choose the language you want (Optional)

If you are planning to display your site in a different language, you can select the character set to support that language. This is optional and you can skip it if you want.

How to Add Custom Fonts in WordPress

5. Embed the code to your website

According to the settings you have made above. Your fonts are now prepared by Google and are ready to be used. You just have to copy and paste a piece of code to your website. You have two choices.

Standard: This standard HTML code should be placed inside your header.php file preferably right after <head > tag.

@import:  Import tab contains CSS import code which should be kept at the beginning of your style.css file.

Also Read:   How to Start WordPress Blog for Beginners

You can use any one of the above two choices.

6. Call the Font in Your CSS

Now your website has you desired fonts integrated. You can use the fonts in the CSS by assigning it with any element you want. Here is an example of calling the font.

body{
           font-family: 'Open Sans', sans-serif;
}

That’s all. This is how Google fonts are added in any website.

Here are few alternatives to Google Font that you can try for adding custom fonts.

1. Easy Google Fonts

How to Add Custom Fonts in WordPress

Easy Google Fonts is a plugin that allows you to add Google fonts without any coding. This also allows real-time live preview by automatically integrating with the WordPress Customizer. Similarly there are many other plugin that helps you to add custom fonts. Use Any Font  , Fonts, and Fonto – Web Fonts Manager are few top-rated plugins for doing this task.

2. Adobe Edge Webfonts

How to Add Custom Fonts in WordPress

Like Google Fonts, Edge Webfont is a vast web font library with more than 500 completely free fonts. Edge Webfonts gives you user friendly service and using fonts from Edge is very easy. Just like Google font, search for the font, select it, configure the font and finally use the codes given to integrate the font in your website.

3. Typekit

Typekit is another Adobe powered resource of fonts. They provide premium as well as free fonts. It is a subscription font service. First you have to sign up to use their service and then select the fonts you need. Then you get the embed code that you can use to integrate the font into your website. The next thing you have to do is install the Typekit Fonts for WordPress plugin. After activation, navigate to Settings >Typekit Fonts. This will open the plugin’s setting page where you have to add the embed codes.

4. Using CSS3 @font-face

For using this method you have to download the font you like in web formats on your server. This is a direct way of adding custom fonts but it may not be the best way due to its complexities. To use custom fonts using CSS3 @font face, first you have to upload the webfont files to your hosting server. It is a good idea to create a separate ‘fonts’ folder in your theme and upload the files in that folder.  To load the fonts in your theme use @font-face rule in CSS file like this.

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

Replace the font-family and URL with your own. Now you are free to use the font anywhere in your stylesheet as you like.

 .para3 { 
font-family: "Arvo", Arial, sans-serif; 
}

Using custom fonts in your website can directly influence user experience. Using the tips mentioned above you can easily integrate web fonts with just a few clicks. In this article we learned how to add custom fonts in WordPress. You can read our next article on “How to Customize WordPress Site with CSS“.

The following two tabs change content below.
Kantiman Bajracharya

Kantiman Bajracharya

Kantiman Bajracharya is a freelance web developer. He is a computer geek who has a Bachelor’s degree in Computer Engineering. He has earned lots of satisfied customers while working for numerous successful projects. He is also a WordPress theme creator and web article writer. On free time he likes reading philosophy books, traveling and playing chess.

Share This Post