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 from 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
- Select the font from the font selector
- Add it to your selection
- 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
- Download a font and add to
/assets/fonts/in your theme - 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; }
- 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
