Add Custom Fonts Into Your WordPress Theme

Abd Ur Rehman Code, Themes, WordPress 2 Comments

Add Custom Fonts Into Your WordPress Theme

Add custom fonts into your WordPress theme. Nowadays most of WordPress users are curious about the use of custom fonts. Have you ever asked your WordPress developer to add custom fonts in your WordPress theme?

Do you want to add custom fonts in WordPress? Custom fonts can help you freshen up your theme and stand out.  There are many ways to add custom fonts like using Google Fonts, TypeKit and CSS3 and in this article, I will show you how to add custom fonts in WordPress using CSS3 @Font-Face method.

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

You can add custom fonts to your website using CSS3 @font-face rule. The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.

Basically you need to add the following code into your theme’s custom CSS or into your child theme’s style.css file (if you haven’t installed a child theme, Take a look here: Creating Child Theme in WordPress

Deepest Possible Browser Support

This is the method with the deepest support possible right now. The @font-face rule should be added to the stylesheet before any styles.

Replace MyWebFont with the name of your font, path-to-your-font-directory with your fonts directory URL (e.g, http://yourwebsite.com/fonts) and font_name with your font’s name.

Next, whenever you need to use this font, simply use “MyWebFont” (or your custom font name), e.g:

Alternative Techniques

@import

While @font-face is excellent for fonts that are hosted on our own servers, there may be situations where a hosted font solution is better. Google Fonts offers this as a way to use their fonts. The following is an example of using @import to load the Open Sans font from Google Fonts:


Then we can use it to style elements:

linking a stylesheet


Then, we can style our elements like the other methods:

You might find this interesting: Create a child theme in WordPress

If you found this article helpful share with others and for any question drop me a line in comments! 🙂

Comments 2

  1. Hi! Thanks for sharing this knowledge. I’m developing a website using Wampserver and I can’t get it to show my custom fonts (.ttf). Could you give an actual example of the correct path? Thanks again!

    1. Post
      Author

      Hi, Pablo! Thanks for reading this post. The actual example will be like wp-contenet/themes/your-child-theme/fonts/your-font.ttf I hope this helps. Let me know how it goes. 🙂

Leave a Reply

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