Blog

WEBFI-WordPress-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.

–Links–

►Written Tutorial – How to Add Custom Fonts in WordPress Manually and Using a Plugin
https://www.wpbeginner.com/wp-themes/how-to-add-custom-fonts-in-wordpress/
►MonsterInsights https://www.monsterinsights.com/ Promo Code WPBVIP

–Top Resources–

Use Promo Code WPBVIP

►Best WordPress Contact Form Plugin https://wpforms.com/wpbeginner
►Best WordPress Analytics Plugin https://www.monsterinsights.com/
►Best Lead Generation Plugin https://optinmonster.com/
►Best WordPress SEO Plugin https://aioseo.com/
►Best Landing Page Builder for WordPress https://www.seedprod.com/
►Best WordPress Giveaway Plugin https://rafflepress.com/

–Related Videos–
►WordPress Tutorial – How to Make a WordPress Website for Beginners https://www.youtube.com/watch?v=DvbFBxKcORA
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor https://www.youtube.com/watch?v=JjfrzGeB5_g
►What is SEO and How Does it Work? https://www.youtube.com/watch?v=JjfrzGeB5_g
►How to Install a WordPress Theme https://www.youtube.com/watch?v=ZIPQRQLAz90

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.

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

34 Comments

  • subed hussain on May 9, 2019

    thanks, nice tutorial

  • Multi Facts on May 13, 2019

    thank you so much for this tutorial.

  • Rachit Rastogi on June 1, 2019

    Can i edit the font style of my site identity?

  • Mr. Singh on July 26, 2019

    But how I can change Draft post?

  • Mauro Achille on July 30, 2019

    At the end you paste the CSS Code but you don't show where did you copy it from! 🙁

  • ashish chaudhari on September 13, 2019

    I used both methods but my font not changing

  • ashish chaudhari on September 13, 2019

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

  • GoMinivan on October 12, 2019

    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

  • ashish chaudhari on October 30, 2019

    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

  • John M. on November 11, 2019

    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?

  • antonellabarberini on November 15, 2019

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

  • Daniel Feneck on December 5, 2019

    Manually? You used a plugin for both methods.

  • International Women Leaders on January 21, 2020

  • Mohammed Minoddin Sharker on January 22, 2020

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

  • Arnaud Guillard on March 10, 2020

    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 ?

  • Naeem Ahmad on April 2, 2020

    Respected Madam, How I can add BBC Urdu font in WP so that I can write Urdu in my b log posts as I sea in bbcurdu.com
    Thanks for the guidance and obligation
    Regards,

  • Sorin Feraru on April 8, 2020

    WHAT ABOUT PAID FONTS FROM FONTS.COM?

  • Techno Arvind on May 5, 2020

    How to remove google fonts on my theme or Cpanel ?

  • khecha samiha on May 29, 2020

    Please can I understand why doas Tw Cen Mt font not existing in google font library!

  • Gurmeet Singh on June 13, 2020

    Thank you very much fro such an informative video.
    How to use 2 different fonts in a single paragraph. Actually, My website is regarding mathematics. I have to use different font for math symbols and different font for other text.
    Please help me out.

  • LA News Connection on June 29, 2020

    you go by way too fast for beginners

  • thanks that was great. you went a wee bit fast at times, as in settings customise css code.. but at least I can pause. I recently installed google fonts but didn't do all the heading settings so that was useful. some of the fonts don't work right as I haven't changed that. so will get on to that right away….

  • Faruk Karacan on July 15, 2020

    How i chance font and size website title and slogan?

  • wala abdelali on August 7, 2020

    This is by far the best vieo I've watched about chnaging font! thank you so much for your help!

  • alex turton on September 4, 2020

    Hi, I did the google method and my body text changed fine but the headings didn't seem to change at all.. any advice?

  • HDTV Telugu on September 15, 2020

    I use the first method. It helps in adding all header scripts like google codes – analytics, adsense; bing codes, multi language fonts etc. Multiple use.

  • smurfynet hcm on November 9, 2020

    Not useful if you don't want google fonts.

  • Adéla Albertová on May 6, 2021

    Thank you for this video! I love the 2nd method! I felt super frustrated today and now I am sooo excited. My website is being finalized.

  • Hadis Mansouri on May 16, 2021

    Thank you! saved me!

  • Carolina Jimenez on May 21, 2021

    Answered to exactly what I was needed to do. Thanks!

  • Ali Farhan on June 16, 2021

    How can I use the font that Google himself uses ie "Google Sans"…can some tell me ?? As it is not available on Google fonts website🙁

  • Dilara Zeynep Ünal on July 29, 2021

    Hello everyone! Thank you for your amazing video. I just have one question, if google fonts or type kit do not have a font which I wanted to use, how can I customize my font in WordPress? like Obveron fonts?

  • DOS-Plaguea on September 17, 2021

    You download plugin for inserting , and say's that it's normal, but it's no good to do this

  • Elisha K. Philip on December 10, 2021

    How to add system font to wp website

WhatsApp us
Live Chat

Office hours operation Mon-Sun 8:00 am ET – 4:00 pm ET

To start your Premium WP or Cpanel service, use our domain search engine, if the domain you want is available, contact us by Whats app to activate your project.

The easiest, fastest, and most secure way to communicate with us.
loading
Please enter your domain.
Please verify that you are not a robot.

Terms Privacy

 

 

error: WEBFINET SECURITY IS ON