How To Add Custom Fonts in WordPress

Do you know? you can not utilize any of the custom font without adding in WordPress. Before using any particular fonts in WordPress, you need to add custom fonts in WordPress CSS style sheet. This procedure is little bit complicated but after watch this tutorial you will be able to add and run any particular fonts in WordPress.

How To Add Custom Fonts in WordPress:

To add custom fonts in your WordPress, you need to following the following steps.

1. Download the particular fonts which you like to add them in your WordPress. You can download fonts from 1001 fonts and da fonts.
2. Extract downloaded fonts and separate the .ttf (True Type Font File) font file.
3. Create a separate folder with the name of ‘fonts‘ in your themes directory on server like public_html\Website_name\wp-content\themes\magazine_theme\fonts\font_name.ttf
4. After upload your fonts in your root directory, next things is add custom font in your current theme CSS style sheet. For this purpose open your theme style sheet like public_html\Website_name\wp-content\themes\magazine_theme\style.css or whatever.
5. Add the below code in your CSS style sheet.

@font-face {
 font-family: Arial, Helvetica, sans-serif; //You can write anything like Arial_font etc
 src: url(https://www.knowledgeidea.com\wp-content\themes\magazine_theme\fonts\font_name.ttf);
} // Add Font destination URL

Now your font has been added in your WordPress website. Now you can associate this one added font to any paragraph, title, headings etc but remember that, you will need to add few CSS lines to associate this font to anyone part of themes. Let’s suppose you are using WordPress default theme (Twenty Fifteen) and you want to associate the added font with theme post title. For this purpose you will need to find the title CSS class and you can find CSS class through browser inspect element.

After find the associate class then go to your theme style sheet and find the same class which you find out from inspect element. Then you need to add a small CSS line “font-family: Arial, Helvetica, sans-serif !important;” see the below implementation of font family CSS line inside title class.

After add those font family, now your added font is successfully connected with your particular part of theme which is currently a title. Just you need to find CSS class of any part of the theme then simply add font family  which you added in your WordPress. Review the below image with prominent font change.

You can add infinite fonts because there is not threshold and restriction, but remember that destination URL should be correct which you will be mention in your CSS style sheet.

Let us know, if you understood all the little aspects with full satisfaction. You also can add multiples fonts in your directory and can utilize on web pages, but keep remember that, do not use excessive fonts because much fonts can lay down your website speed, which users never likes. Fore more discussions and useful opinions, join us via comment.