Podcast Episode

506 – Adding Custom Fonts to WordPress

Announcements

Is there a plugin for that?

With more than 50,000 plugins in the WordPress repository, it’s hard to find the perfect one. Each week, I will highlight an interesting plugin form the repository.

For more great plugins, download my 50 Most Useful Plugins eBook.

How to Add Custom Fonts to WordPress

  • Create separate images for all the custom fonts (please don’t do this)
  • Add a link to a Google font to your theme
  • Upload the font to your theme
  • Use a plugin like Custom Fonts or Fonts Plugin

Add a link to a Google font to your theme

  1. Select the font from the font selector
  2. Add it to your selection
  3. A side window will slide in and provide you the code to use. It will look like this:

<link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet">
4. Then you can change the CSS property across your site like this:

font-family: ‘Pacifio’, cursive;

Add a font to your theme folder

  1. Download a font and add to /assets/fonts/ in your theme
  2. Call the font in the CSS like this:

@font-face { font-family: New Font; src: url(http://www.yourwebsite.com/wp-content/themes//fonts/your-new-font.ttf); font-weight: normal; }

  1. Then it can be called like as before:

font-family: ‘Pacifio’, cursive;

Thank You!

Thank you to those who use my affiliate links. As you know I make a small commission when someone uses my link and I want to say thank you to the following people. For all my recommended resources, go to my Resources Page