Ever wondered how to change your fonts in WordPress? It’s easier than you think, and in this video, I’ll show you how.
Read the written guide here 👉🏼 https://www.wpbeginner.com/wp-tutorials/how-to-change-font-in-wordpress/
–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 Theme Builder for WordPress https://www.seedprod.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
If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.
https://www.youtube.com/subscription_center?add_user=wpbeginner
Follow us on Twitter:
https://twitter.com/wpbeginner
Check out our website for more WordPress Tutorials
https://www.wpbeginner.com/
#WPBeginner #WordPress #WordPressTutorial
In today's video I'm going to show you How to customize the fonts on your WordPress website in five different ways Let's go So the first method you can utilize to Customize the fonts on your WordPress Website is by looking at the theme that You're using because a lot of the times The theme that you use on your WordPress Website already has the functionality Built in to customize the fonts and Typography on your WordPress website let Me give you a quick example this is a Demo website that I've grilled or I've Built using the Astra theme and for a Fact I know that the Astro theme does Have the functionality to customize the Fonts and the functionality is actually Present in in the WordPress customizer So what I'll do is go to the customizer By clicking this customize button right Here and once the customizer opens I'll Locate the typography options which are Present under the global options so I'll Go to the global section right here go To the typography options right here and These are the options that I have in the Astra theme to customize my fonts so I Have few different presets also so for Example I don't want to find out or Don't want to experiment with different Font combinations myself so they are Predefined font combinations that I can Use right here as you can see instantly
The second I'm clicking and the fonts on My website are actually changing I can Also change the basic fonts right here From the menu itself so for example if I Want to change the body font all the Headings font I can do it right here so By clicking this pencil icon the menu For typography customization will open Up and right now as you can see the font Family is set to pop ins but if I click This drop down menu let's say I have a Scroll up let's say I switch it to Helvetica then instantly you can see the Heading fonts actually change up and as You can see this Astra theme has bunch Of fonts integrated all the Google Phones technically are integrated with The Astra theme so depending on what Theme you're using you might already Have this functional the built in to Customize the fonts on your website and As you can see apart from changing the Font for the headings and for the body I Can also customize the headings for H1 H2h3 that means different kinds of Headaches customizable right here inside The theme so your theme might provide You with the functionality that you need Already to customize the fonts on your Website that's for method number one Let's go to Method number two So let's talk about the second method You can utilize to customize the fonts On your WordPress website now this
Method will apply only to people who are Using the modern block based theme for Example I'll show you my screen right Here and I've activated instead of the Astra theme I've activated the 2022 Theme right now on the WordPress website And how do you know that this is a Blog Based theme because under appearance Instead of noticing that instead of the Customizer you start getting this editor Option right here which is still in beta But it's still functional so if you are Using a Blog based theme you won't see The customizer on your website that's The first line that you're using a Blog Based team and if you like that theme You already want to use it and still Want to customize the fonts on your Website the method is a little bit Different what you'll do is go to the Editor option right here by clicking This option right here this will open up The newer editor in the WordPress I say Interface which is more of a Blog based Approach to changing and what the option You have here is the ability to Customize a lot of styles in terms of Presets so you can create an entire Preset and change it across themes so Maybe what you see on the screen right Here will be something like this or Maybe you will say something like this But what you need to remember is that to Open these styled options or open the
Style options you'll have to click this Option this button right here which is Called Styles so once you click this You'll see start seeing the Styles Option and inside the style option you See the colors and the layout and of Course you see the typography options as Well so by clicking the typography Option I'll scroll down and I'll see the Typography option for elements that Means the links and the text so let's Say if I click Text I have now the Option to change the font family from System font to something else and as you Can see the font family instantly Changes right here if I go back to Default you see the default option System font or I say Surf and I can also Change the size of the font and I can Also change the line height and also Change some of the display options so I Can change the font from Bold to italic Or something whatever the font actually Supports the font Family actually Supports I can actually change it and The font family will start reflecting That change now one thing to keep in Mind is that the page I designed was Designed with the Astra theme if you Just use the 2022 base basic team the Interface as is different and depending On the theme that you're using in terms Of the block themes the functionality or The customization ability inside the
Fonts will also change you might see More fonts you might see less fonts but The functionality or the way to change The font is through this interface right Here this was method number two on how To customize your funds inside your WordPress website let's go to Method Number three So let's talk about the third method you Can utilize to customize the fonts on Your WordPress website and this method Will apply to people who are using a Non-block based team that means regular WordPress themes but still want to have The functionality to customize the fonts Directly from the theme for example just For this demonstration what I did was Instead of using the 2022 team or the Astra theme I switched to the 2020 theme An older version of the WordPress Default theme and if you go to the Customizer right here you can explore All the menu options all the options and You won't find an option to customize The text or customize the typography or Customize the fonts on your website so How do you customize the phones in this Case that's the answer which I'm going To discuss right now and the easy Solution to this is by using a font Management Plugin or a font plugin which I'm going to use or demonstrate right Now now there are tons of plugins out There right you can go to the plugins
Directory and install any of the font Plugins but the plugin I found that Works the best is called easy Google Fonts easy Google fonts is a fantastic Plugin I'll just demonstrate how it Works but the idea is it gives you Access to Google fonts it also gives you A access to a lot of different Customization options not just picking a Separate font right that's why I Recommend that you use this plugin for Changing your phones or customizing Phones so let's install this plugin by Going to the plugins menu add new and Since this is a free plugin available in The wp repository we just have to search For the plugin name And the plugin should show up do keep in Mind that other plugins might also look Similar so you might accidentally Install the site kit plugin but we are Looking at this plugin right here easy Google funds let's install the plugin Plugin is installed let's also activate It Once the plugin is installed you'll see Some of the notice right here but you Can skip this by just going into the Settings or by clicking this option Right here inside the settings which Will bring you to the same page now this Options can be a little bit more Confusing to set up so if you're just Looking to change the fonts on your
Website I would suggest that you go Right here manage with live preview Click this button right here leave this Page and you will go to the customize it Directly and you will see a typography Option being reduced right here on the Customizer so if you're in the main page Typography inside typography you'll see All the options to customize the fonts On your website so paragraph heading one Heading to up till heading 6. let's try And change the font of this home label By going to home heading one right here Now you have options to change the font Family so right now set to Aerial but I Can go to any of the fonts and you can See how long I have to scroll to find All the options there's tons of options Available to me so I click this one and The phone instantly changes I can pick Fonts based on languages I can also Change their weightage for example I Just made it a little bit heavier then Decoration that means underline line Through over line all these options but I also have the option of changing the Styles so if I go right here I can Change pick the font color I can also Change the position that means sending a Margins paddings borders border radius And display options for all fonts and I Can customize this for heading 1 Paragraph one heading to all the Different fonts on my website so instead
Of just giving you the option of Changing the font you have complete Control over how you want your Typography your website to be changed so That's why I recommend this plugin to You because it gives you a lot more Control and it also makes it very easy For you to change the fonts on your Website if that's the only thing that You want to do so this was method number Three on how to customize your website Or customize the typography or fonts on Your website in the easiest way possible Let's talk about method number four So talking about method number four to Customize the fonts or the typography on A WordPress website this will apply to Only people who are using page builders On your website now I'm going to be Using a page builder called seed prod on My website but this will apply to any Page builder because the functionality Is there but the interface might be just A little bit different so I have seed Plot installed and activated on my Website and let me just clarify that I Am going to be demonstrating using a Landing page which is a standalone page That I have created or just imported From seed plot but what you can do is This using the same functionality you Can customize any of the posts or pages On your site so you can design an entire Page using seed plot or you can set up
An entire theme or customize the entire Theme of your website using seed plot as Well all that functionality is present In seed plot and different page Builders Might have different functionality but The ability to customize the font will Still be there so since I've already Have created a landing page right here You can see seed product landing pages I Have inside here landing pages let me Edit this page and I'll demonstrate how You can customize the typography of your Pages using seed plot so whether I'll do Is click the edit button and this will Open up the seed plot design interface Where I can customize the page not just The typography but I can add all these Elements to design my page visually so If I want to add images I can just drag And drop headings text lists all these Elements can be added to my pages but Since we are customizing the fonts what I'll do is select the select the element Or widget that I want to customize so Right now let's say I want to customize The typography of this heading right Here so I'll click right here and you'll See this section being changed because Right now we are seeing the blocks and Sections but as soon as I click this Will open up the options of this Particular widget or element so now we Have options for the headline so we have The content options which you can see
You can change the actual text of the Headline you can make it bold italic Underline or strike through add a link Here and some basic options you can also Change the level of the heading and also Change the font but to go to change the Typography options what you'll do is go Right here inside the advanced options And you'll see these Styles options Inside this you have the typography Options you have the color options text Shadow options let's open up the Typography options to demonstrate what Options we have available available to Customize the typography so I'll click This button right here and you have the Font family default which is coming from The theme right directly with the Default theme font but you can change it To anything you like for example I can Change to helvetica I can Georgia Any of the fonts that are available and We also have our seatbelt also has Google fonts available right here so you Can scroll to all around 600 700 fonts And customize the font to your heart's Desire you also have the option to Change the font weight and also change The font depending on the device so this Is an important feature let's say on a Desktop this font looks good but maybe In a mobile view you want the font size To be a little bit different so what you Can do is customize that option as well
And apart from this you can also change The line height line spacing and some Other elements depending on what device Your visitor is actually visiting the Page from so this is the way that you Use page Builders to customize the Typography typography or fonts on your WordPress website all right let's go to Method number five So let's talk about the fifth and final Method to customize the fonts on your WordPress website and for this method We'll be using the native built-in Controls inside the block editor inside WordPress to customize the font and Typography of a WordPress website and Just for clarifying uh what I've done is Switch to the Astra theme once again Because this functionality is dependent Slightly on the theme that you're using So depending on the theme your mileage Will vary depending on what are the kind Of options I'm going to demonstrate so Once the theme is done let's open up a Page on our website which we'll start Customizing the fonts for so I'll go to The pages section right here all pages And let's pick this instructors page Because I know it has a lot of content Define or what i is already installed From the Astra theme so right now this Is the page already built up let's say I Want to change some of the functionality Or some of the font or customize some of
The font that is here so I'll click this Option and this will open up the block Based settings right here so instantly You can see some of the options being Available I can change the text color And the background color so if I check Click the text icon I can go to this and Instantly you can see the text it has Changed or I can do this or this so any Of the phone combinations that are Present already so theme based uh color Combination is also default font colors You can actually do it all right here And you can also change the background Color for example let's say black on Something like this just to give an Example I'm not a professional designer So it might not look great but here is What you can do to actually customize The fonts colors and the background Color but you have some additional Options here as well you have the Typography options so you can change the Size of this option right here but you Can also do some more or you can also do Some more here so you see notice this Typography option right here there's a Three dotted menu right here if you Click on this you see all these options Come up and what this allows you to do Is inside the typography options the Additional options are actually hidden Behind this three dotted menu so right Now as you saw we had this font size
Come up here but if it changes to Appearance now we have a different set Of options available here so if I click This you see all the different Appearances of the font that I'm using Are now available for me to customize And choose so the default one is Selected right now let's say I go to Extra bold italic and instantly see this Font actually change right here so this Is also another option available for me To customize the font on my website and What I can do is instead of going to Just uh appearance I can also do is line Height so now I can change the line Height as well I can do letter case and I can change the letter casing as well So let's say if I want everything to be In Upper caps I can click this button Right here and I can also add letter Spacing and also drop cap so whatever Option you enable here here you can see All this right here will be enabled or Added to this specific section and will Start showing up here and let's say you Change your mind or something and say You don't want to use a functionality You can just click right here let's say I don't want to use the letter case I'll Just click right here and that will Disappear and the setting will be also Reset to the default options so Inside the WordPress interface itself You have some of the functionality to
Customize the fonts on your website Definitely you can't change the font Right here but as I said you can use a Combination of these methods to Customize the fonts and then also change Some of the font Styles right here Inside WordPress and that's it for this Video what's some related videos right Here which I'll place on the screen and If you're interested in easy to follow Along WordPress tutorials just like this One don't forget to subscribe to our Channel wpbeginner I'll catch you in the Next video
