How to Add Custom Fonts in WordPress Manually and Using a Plugin



Are you looking to customize the font on your WordPress site to make its design exactly how you like? Not all themes have a built in method to edit the font of your site and you may be looking to change this. In this video, we will show you how to add custom fonts to your WordPress site.

Font Pair website: https://fontpair.co

For selecting the fonts to use on your site you can use the Font Pair website for what would work well together and then you can visit the Google Fonts website at: https://fonts.google.com

Select the fonts you want to add and there should be a new section at the bottom of the page where you can see the fonts you selected to add to your WordPress site. Expand that area and ensure you are under the Embed section for the correct code that you will need to add to your header.

For adding the code you would want to use the plugin Insert Headers and Footers found here:

https://wordpress.org/plugins/insert-headers-and-footers/

Under Settings, Insert Headers and Footers you will add the first set of code to add the fonts to your site. With that added and saved you will want to go under Appearance, Customize, Additional CSS and there you would be able to add the second code which lets the font be visible to you and your visitors.

A second method would be using the Easy Google Fonts plugin: https://wordpress.org/plugins/easy-google-fonts/

The plugin will add a new section under Appearance, Typography and there you will be able to select the font to use for each style location. We would still recommend only two fonts to prevent confusing your users.

Our third method for this would be the plugin Typekit Fonts for WordPress: https://wordpress.org/plugins/typekit-fonts-for-wordpress/

With that plugin, you would be able to select fonts from the Typekit website, add the ID from the popup, and select where you want the custom font for your WordPress site to appear in your Appearance, Customize, Additional CSS section.

Text version of this tutorial
http://www.wpbeginner.com/wp-themes/how-to-add-custom-fonts-in-wordpress/

If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.

Check us out on Facebook
https://www.facebook.com/wpbeginner

Follow us on Twitter
http://twitter.com/wpbeginner

Checkout our website for more WordPress Tutorials
http://www.wpbeginner.com

source

Related posts

20 Thoughts to “How to Add Custom Fonts in WordPress Manually and Using a Plugin”

  1. Thank you for this tutorial !Β 
    When I want to change the Font Size it doesn't work (the size is the same from 10 to 100px) you know how I can figure it out ?

  2. hi , i learned a lot from here. thanks a lot

  3. Manually? You used a plugin for both methods.

  4. why is WP asking me 200 euros to install this plugin? on a business plan? isn't it for free?

  5. When you’re bringing in fonts through the CSS portal, are we able to use the across the board? Or is it only for footers and headers?

  6. Hey i tried almost all methods to change my font but it not changing….. i can't understand what is the problem with my website

  7. I love you. I'm so scared to do ANYTHING with my wordpress site fearing that it will poof into the thin infinite void. This took 2 real minutes!! HUGS from Minnesota

  8. I am using Hestia theme …google font not working on my website, please tell me what to do

  9. I used both methods but my font not changing

  10. At the end you paste the CSS Code but you don't show where did you copy it from! πŸ™

  11. But how I can change Draft post?

  12. That 2nd methods worked good for me. I want to change theme font in the menu of storytime, how can I do that?

  13. Okay I followed this however you don't explain if that CSS code has errors. I placed it and it gave 8 errors in the code, so I didn't paste it because it could break the site. That's what it said.

  14. Can i edit the font style of my site identity?

  15. thank you so much for this tutorial.

  16. Hello there, what is your preferred WordPress page builder ? I work with a few although my favourite is undoubtedly Oxygen.
    Many thanks for your effort in this video footage – very good stuff!!
    πŸ˜€πŸ˜€πŸ˜€πŸ˜€

  17. It's not really "manually" when you still require a plugin….

  18. What about something to select the font in the editor ?

Leave a Comment