1. Upload Font Files

To enqueue font files:

– You can upload font files to child theme folder : How To?
OR
– Can use a plugin like Custom Fonts.

Never edit main theme.

2. Call The Font For Use

• Once the font file is in place, call that font via a snippet.
• Use ‘Custom CSS‘ option of Theme Options to add below snippet.

  @font-face {
  font-family: New Font;
  src: url(http://yourwebsite.com/wp-content/themes/your_child_themename/fonts/font-name.otf);
  font-weight: normal;
  }

3. Specify the Elements which should use new font

• Use ‘Custom CSS‘ option of Theme Options.
• If need to use all over the site

  body { font-family: "New Font", Arial, sans-serif; }
  

• If need to use for only headings

  h1, h2, h3, h4, h5, h6 { font-family: "New Font", Arial, sans-serif; }
  

• If need to use for selected element, specify CSS selector of that element

  .my-own-element { font-family: "New Font", Arial, sans-serif; }
  

Important Considerations

• @font-face {
  font-family: New Font;
  src: url(http://yourwebsite.com/wp-content/themes/your_child_themename/fonts/font-name.otf);
  font-weight: normal;
  }

  Make sure that the path to enqueue the font file (ttf/otf) in above snippet is correct.
  You can check by copying path in browser, if it is opening/downloading font file, path is correct.
  If giving 404 error, it is wrong.

• Many times font files are named with spaces.
  Example: The Great Font

  We should either rename font file names with ‘-‘.
  Like: The-Great-Font

  @font-face {
  font-family: New Font;
  src: url(http://yourwebsite.com/wp-content/themes/your_child_themename/fonts/The-Great-Font.otf);
  font-weight: normal;
  }

  OR

  While giving path include ‘%20’ in place of blank space.

  @font-face {
  font-family: New Font;
  src: url(http://yourwebsite.com/wp-content/themes/your_child_themename/fonts/The%20Greaty%20Font.otf);
  font-weight: normal;
  }

• Specify Correct font name in font-family. You can get that in ‘Read Me’ file of the font.
• Specify font wight as per the font.
• Same way you can call multiple font families.

How To Upload Font Files To Child Theme Folder

• Upload font files in the folder named as ‘fonts’
• So path to font files will be like this:
  Child Theme Folder / fonts / Font Files