how to add custom font?

I don’t know if the theme you are using has some out of the box ability to do this, but you can always do this by the following way (assuming you are looking to use Google Fonts).

1. Go to https://fonts.google.com/ and pick the fonts you like to use in your application.

2. Once you selected your font(s) navigate to “Import” tab in Google Font console and copy the @import part. I have chosen Lato, so for me it looks like:
@import url('https://fonts.googleapis.com/css?family=Lato');

3. Create a new folder called custom-css and create a new stylesheet file fonts.css under your theme’s root (this is how I do it to keep this separate from main stylesheet, you may use your own folder structure).

4. Inside this file put the @import URL at the top and then write the following code: .lato{font-family: 'Lato', sans-serif;} and save the file.
Your CSS file should now look like:

@import url('https://fonts.googleapis.com/css?family=Lato')
.lato{font-family: 'Lato', sans-serif;}

5. Now you would need to enqueue this style in your functions.php file. To do this, you have to have a functions.php in your theme’s root. Here is how you would do this:

function include_my_resources() {
  wp_enqueue_style('gfonts', get_stylesheet_directory_uri().'/custom-css/fonts.css', array(), mt_rand(), 'all');
}
add_action('wp_enqueue_scripts', 'include_my_resources');

6. That’s it. Now you are able to use the CSS class you have defined with any HTML element like this:
<h1 class="lato"></h1> or <p class="lato">Your text</p> and so on.

Let me know if this helps you to achieve what you are looking for.

• This reply was modified 8 years, 10 months ago by Subrata Sarkar.