Home » Internet » Web Designing » How to use custom fonts in WordPress

How to use custom fonts in WordPress



Would you like to use custom fonts in WordPress? But what exactly are custom fonts?

When people see your website or blog, whether you are using WordPress or any other CMS, only those fonts installed on their computers are rendered. For instance, if you use Verdana on your website and they don’t have this font installed on their computer, this font rendering will be replaced by another font. This is why, when you’re mentioning what fonts to use in your stylesheet, you normally mention multiple fonts like this:

p{
font-family:Georgia, “Times New Roman”, Times, serif
}

This means that your first choice is Georgia, but in case this font is not installed on the user’s computer, then “Times New Roman” should be used.

But what if you want the user to experience the exact font you want to use on your WordPress website irrespective of whether the font is installed on his or her computer or not? You use a custom font.

For instance if you look at the header of the blog here, you will notice that “The How to Do Things Blog” uses a bit unusual font (it is a custom font). This point is normally not found on people’s computers. It’s name is advent-Re.

In order to use a custom font in WordPress you can do two things:

  • You can upload it a font onto the theme folder of your WordPress blog
  • You can use one of the online font repositories such as Google Fonts and link to one of their fonts directly from your CSS file.

Every WordPress blog theme has its own style.css file and it is in this file that you define the layout of your blog and also get to decide what fonts and their sizes your blog or website is going to use.

There are different types of fonts, some are compatible and some are not. If you’re looking for a compatible font, use an OTF font as it can be rendered on practically every platform.

For this example let us use advent-Re.otf as it is already there and you can see it in effect.

Using one of your preferred FTP clients, you need to upload this font into the theme folder of your WordPress blog. Once it has been uploaded, it’s path should be:

/blog-path/wp-content/themes/your-current-theme/advent-Re.otf

After you have uploaded the font, you need to instruct your style.css file to make it ready for use. Use the following code:

@font-face {
font-family: advent-Re;
src: url(‘advent-Re.otf’);
}

Once these lines of code are included, you can use this font as any other font. For example, if you want to use it with your <h1> tag:

h1{
        font-family: advent-Re;
}

What if you want to use one of the Google fonts. It is even easier. You don’t have to upload any font and you can directly link to it either from your header.php file or through your style.css.

Just go to Google fonts, find the custom font that you would like to use on your WordPress blog or website, and preferably click the “Quick Use” icon.

Quick use Google font icon

On the following page there are different sections marked as 1, 2, 3 and 4. Go to 3.

There are different tabs. If you copy paste the contents of the first “Standard” tab you will have to put this line in the header.php file within <head></head>.

The second tab, @import allows you to use the font from your style.css file.

Some people also prefer to use JavaScript, but you shouldn’t unnecessarily use JavaScript routines so let us skip that.

Once you have referenced to the font directly you can use it in the user manner using the stylesheet definition font-family: font-name.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>