How to Integrate Custom Fonts

From this tutorial you’ll learn how to integrate custom fonts to WordPress sites.

Integrating Custom Fonts
  • First, let’s download the font you want to apply to your website texts to your hard drive. It can be in TTF or OTF extension. The type of extension defines the font compatibility with the browsers.
  • Navigate to your hosting server cPanel and open File Manager tool. Here locate your theme folder (wordpress/wp-content/themes/theme-name/assets/fonts). Open it.
  • Click on Upload button. Upload the font-name.ttf (or .otf) file from your hard drive.Integrate Custom Fonts
  • Now let’s apply the font to your website. Locate style.css file in the theme folder and open it for editing.
  • You need to add the following lines of code to it. Don’t forget to replace the font name and the font source by its actual name and location on your server.
In the case, you don’t know the font name, double-click on the font file. Here you’ll see the name of the font to use in the code.
  • Now we’re going to define the cases when the font needs to be applied.E.g.,
  • In the example above we’ve defined the font for the H1 headings.

Was this helpful?