How to add custom Fonts in Your WordPress Blog or Website?

If you want to change the font style then you can specify the font-family in this statement. For example you can over-ride “Georgia” with “Arial” for using “Arial” as the font for site’s title. But condition is that the font should be installed within your theme.But if you want to use some other font which you don’t have installed for your WordPress theme then? Well don’t worry, you still have option to use such fonts by installing the custom fonts manually in 3 simple steps. 

Suppose the font you want to use is “Karloff”, but your theme doesn’t support it then you can add this font type following these 3 basic steps:

 

1. Download the font files
2. Install the Font to your WordPress theme
3. implementing the font with @font-face in CSS

 

1.   Download the Font files

To download the font of your choice you firstly have to find the location of the font from where you can get all files and data about the font. There are a number of websites offering variety of font styles. The most genuine and authorized font downloading websites are Google’s Directory of Web Fonts & Dafont.com font directory.
I will be referencing Dafont.com in this article for downloading KARLOFF font-type.

 

Search and find the required, say KARLOFF font for this example, on the website and download the full file from there.

 

2.   Install the Font to your WordPress theme

So your task of downloading the font is completed. Now you have to install the font in your own WordPress theme. For this first of all you have to extract the zipped files from downloaded compressed folder. You will basically find two types of files in the folder one in .ttf or .otf format and the other one a text file with installing instructions.

 

Now for installing the font in your own website’s WordPress them you should create a folder for placing the custom “KARLOFF” font files for better management. So make a new custom folder with easily recognizable name like with your font-name and place the folder in your WordPress theme somewhere (for better management put it under theme file). Install the font there using .ttf or .otf files following installation guidelines.

3.  Implementing the font with @font-face in CSS

Now the last step is to work with @font-face selector in CSS file. This selector facilitates you to create support for your downloaded custom font-style by making provision for adding the location of font file in CSS stylesheet code using following syntax:

This code basically includes 4 elements to be discussed in details:

a.) @font-face: This phrase or syntax informs WordPress that you are adding & defining a new custom font.

 

b.) font-family:Karloff; – This code makes WordPress aware of the name of the font-style you wish to use. If you are adding some font other than KARLOFF then you will be using that name here.

 

c.) src:url(www/wp-content/themes/thesis-bp-child/custom-fonts/KARLOFF_.otf’)
This code describes to WordPress the location of the file and folder where the custom font specifications are residing in your WordPress theme files. Here I have created a custom folder named “custom-fonts” under the theme folder and have downloaded and installed the KARLOFF font-files there.

 

d.) format (“opentype”);  –  This last element make clear to WordPress about the format of the added font style. The most commonly used format types are – “opentype”  for .otf & “truetype” for .ttf. Mention here the one corresponding to your font-type.

 

Change Font-Family in standard CSS

So after completing the above steps successfully you are done with Custom font installation in your WordPress which is now ready to be used. Now you just have to specify the name of this font in Standard CSS “font-family” selector which I have described in very starting of this post.

Now replace name of the existing font-family in CSS code below with the name of the new font you just added:

#site-title a {font-family:Karloff; }

 

Hence your new font is now ready to work and provide attractive look to your posts.

Hope you have liked the tutorial. If you still have any confusion or suggestion or feedback then please don’t forget to leave it in comment section below.