Using Custom Fonts

  • 00:10: warning: this is an advanced tutorial!
  • 01:16: custom fonts overview
  • 02:27: prepping your font files
  • 03:49: how to access your site files to upload (3 methods)
  • 06:00: installing the File Manager plugin
  • 07:24: adding custom-assets folder and uploading font files
  • 10:12: using custom fonts on block-level
  • 12:08: using custom fonts on global-level

Our themes come with a variety of fonts to choose from, however, we understand that sometimes, you may just want to use your own!

Note: This is an advanced tutorial that requires you to access your site files!

What You’ll Need:

  • Access to your WordPress theme files via FTP, cPanel’s File Manager, or a third-party plugin like WP File Manager
  • The fonts you want to use in .ttf file format
  • Our themes include spaces for 4 custom fonts–Heading, Subheading, Script, and Body/Paragraph. You don’t need to use them all.

How To Do It:

STEP 1. PREP YOUR FONTS

  • Mmake sure you have the proper license from the author of the font to embed on your website. This generally means either A) choosing a font that is in the public domain, B) a font from Google’s font library, or C) a premium font that you have purchased the proper license for.
  • Your fonts should be in .ttf format. Rename your font files exactly as follows.
    • custom-body-font.ttf – your paragraph/body font
    • custom-body-font-italic.ttf – the italics version of your paragraph/body font
    • custom-script-font.ttf – your script font
    • custom-subheading-font.ttf – your subheading font
    • custom-heading-font.ttf – your main heading font

Step 2. Upload Fonts to Site Files

  • You will need to have access to your website files to complete this next step. See “What You’ll Need” section above.
  • Navigate to your wp-content folder.
  • Create a new folder called “custom-assets” if you haven’t already
  • Upload your prepared fonts to this new folder

Step 3. Using Your New Fonts

Select the font from the “typography” selector at the individual block level, or at the global typography styles level:

select your font from the typography selector