You are here: Home » Website Design » How to add Custom Fonts in WordPress Theme?

How to add Custom Fonts in WordPress Theme?

Now that time there are many fonts are used to create website looks better. Now i tell you how to add Custom Fonts in WordPress Theme for website/Blog.

Finding a Font

There are many places to find great web fonts for free such as FontSquirrel or Adobe Edge Web Fonts. Just make sure the font you choose has a licence suitable to your needs.

Here’s a quick summary of different types of fonts and their file extensions:
TrueType Font (TTF) – Compatible with Internet Explorer version 9.0 and above, Chrome starting at 4.0, Firefox at 3.5, Safari since 3.1 and Opera beginning with 10.0
OpenType Font (OTF) – Has the same browser compatibility as the TrueType Font
Web Open Font Format (WOFF) – Supported by Internet Explorer version 9.0 and above, Chrome starting at 5.0, Firefox at 3.6, Safari since 5.1 and Opera beginning with 11.1
Web Open Font Format 2.0 (WOFF2) – Supported only by Chrome since version 36.0, Firefox starting at 35.0 and Opera with 26.0
Embedded OpenType Font (EOT) – Exclusively available for Internet Explorer version 6.0 and above.

Uploading Your Font

Once you have found the font you wish to use and followed your source’s instructions for downloading the file, it’s time to upload it to your server.

It’s best to add it to the folder of your theme, which can be found under wp-content > themes > your-theme. You could optionally create a “Fonts” folder to house your file to keep things organized, especially if you plan on adding more than one font.

Unzip the packaged file and upload the contents to your theme folder.

Adding Your Font to Your Theme

To allow your uploaded font to actually appear in your theme, you need to call it in your style.css file, which you can find under wp-content > themes > your-theme.

In cPanel, select the file, then click the Edit button at the top of the page. If you haven’t previously disabled pop ups, one will appear. If this is the case, click Go at the bottom.

Copy and paste the following code into the file, ideally somewhere where fonts are referenced. Make sure there is a line break in between each block of css and the code you enter.

and following code is used to call font in your website.

Umakant Sonwani is the Founder and Owner of the WP Tutorials Point. He is very Passionate, Geek and Loves Technology and WordPress Development.