16 minutes | Apr 7th 2021

506 – Adding Custom Fonts to WordPress

Announcements The month in WordPress: March 2021 Wix Advertising Campaign Insert Font Awesome Icons Into the Block Editor via the JVM Gutenberg Rich Text Icons Plugin Jetpack 9.6: Sell more stuff with Search for your Woo Store 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. Welcome to the block editor B gone Fullscreen mode B gone 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 View on YourWebsiteEngineer.com
Play
Like
Play Next
Mark
Played
Share