Up next in 10
How to Change Font Family in Blogger ?(Change Blogger theme font style)
37K views
Jan 24, 2024
This tutorial video provides a straightforward guide on how to change the font family in Blogger, allowing users to customize the theme's font style. Released in 2023, the content offers step-by-step instructions, making it accessible for both beginners and experienced users. Whether you're a blogger, content creator, or website owner looking to give your Blogger site a unique and personalized touch, this tutorial demonstrates the process of modifying font styles with ease. Learn how to enhance the visual appeal of your blog by changing the font family in Blogger and tailoring the typography to suit your preferences.
View Video Transcript
0:00
Hello everyone, welcome to KeyTube blogging and in this video, I will show you how you
0:03
can change the font family of your blogger website. So let me just open a post from here
0:11
And if I check the font used in this website, so for this, I will use the QuadFont Chrome
0:16
extension here. And as you can see here, the font family is Poppins and the font weight is 700
0:24
Now let's check here. And as you can see that here the font family used is Notosounds
0:30
And if I scroll down and click on here, the font family used is Arials
0:34
So in this way, you can change the font family of your blogger website. So you can just install the QuadFont Chrome extension in your browser and it will easily
0:42
identify the font used in that page. So let's click on exit here
0:47
So let's check how can change the font family in this website
0:51
So for that, I will go to blogger dashboard here and I will take a backup first
0:56
So in case if you do any mistake in this process, then you can easily restore it back from your
1:00
backup file. So make sure to take a backup first and then click on edit HTML
1:06
And by the way, if you found this video helpful, then make sure to hit the like button and
1:10
if you are new to this channel, consider subscribing. So let me just scroll down here and let's search for the font option here
1:18
So as you can see, the font body code is here, font face
1:23
And if you check the font, it is Noto Sans. And if you check the font heading here, the heading used is Poppins
1:32
So if you want to use the system font in your website and you don't want to load any additional
1:37
font family, then you can easily remove that. So let me just quickly remove that from here
1:45
And if I scroll above and search for this variable font head
1:50
So the font head family is used as Poppins. So I don't want that
1:55
So I can simply change it to system UI. So in this way, the browser will not request a font file to the server and instead of requesting
2:08
it will load the system font file. So if you are using Windows, then it will load the Windows font and if you are using
2:14
Mac, then it will load the Mac font. So basically it will take the system font
2:20
So I will do that same for all variables like font body and font code
2:26
So I can just change it here. So I will change everything from here
2:32
Okay, now let's check if there is any other font family code used in this theme
2:38
So let me scroll down here and let's search for the font family and as you can see the
2:44
font family and it is using the variable font head. So that we have changed here like font head to system UI
2:52
So it will by default change the all font family code to system UI through this variable
2:59
So let me just find this term font family. And I will type like control plus F and I will paste it here font-family and I will
3:09
hit enter. And as you can see, it is using variables everywhere
3:14
So I don't have to manually change the code in every place
3:19
But if your theme is not using any variable, then you have to manually change this font
3:24
family so you can manually change this variable to something like system UI
3:32
Like that and again, I will type like control plus F and I will search for this code font
3:39
family and here you can change the value everywhere. So let's hit enter here and as you can see, it is using in several places
3:52
So you have to find this like that and you have to change the value to system UI if your
3:59
theme doesn't use the variable. So let's click on save here and let's check if the font family is changed or not
4:07
So let me just go to the website and let me just open a different post from here
4:13
So let's click on here and I think the font family changed
4:19
So let's click on the what font here. As you can see, the font is changed to system UI and as you can see, the heading font is
4:27
also changed to system UI and all other font is changed to system UI
4:34
So in this way, you can change the font family. So let's take another theme
4:39
So here this is a cash per theme and let's take how you can change the font family here
4:44
So for this, I will go to blogger dashboard and you can either choose the theme font family
4:50
option or you can change the font family manually. So let's click on the customizer here and check if there is any font family option there
4:59
in this theme or not. So in advance, you have to scroll down and as you can see, the font option is there and
5:07
here you can choose different fonts in this theme. So let's change the font to something like Lato and let's change the font family to Lato also
5:25
Now let's click on save changes. So earlier the font family is different
5:30
So earlier the font family is used is inter and everywhere the inter font family is used
5:37
So after changing the font to Lato, now let's refresh this page and let's take if the font
5:45
family is changed here or not. So I will use the again and as you can see the font family changed to Lato and as you
5:52
can see the body font also changed to Lato. So in this theme, the changing the font family is very easy or you can use the custom coding
6:03
to change the font family here. So I will click on edit HTML here and let me just scroll down and search for the font
6:11
family and as you can see, this is the Google font and this is the font family code used
6:16
in this website. So I don't want this font family so I can simply remove this font family here and I
6:24
can use my own custom font. So let's remove that. Don't remove this material icon font because this font is used for icons
6:33
So I don't want to change that font and as you can see the body font variable is main.fontFamily
6:41
So let me just copy it here and let's control plus F and paste it here
6:49
Now here the main font family is used and in value, the variable family is used
6:54
So let me just copy the variable family and I will type control plus F and search for
7:00
that family. So let's scroll up here and as you can see here in the custom customizer option, the
7:07
value is set to Lato. So I can use any different font from here
7:13
So I can change the Lato to something like system UI and I can change the font
7:23
So let's use any custom font here. So I will search for something like Google font and I will go to font.google.com here
7:34
and here as you can see that there is a lot of font family options available here
7:39
So let me just choose a different Google font here. So let's choose this one Merry Weather
7:45
So I will click on here and here you can choose different styles
7:49
So you can choose like light 300, regular 400. So I will select the regular 400 here and I will select the bold 700 here and I will
8:00
choose the bold 700 italic. So once you add this to your cart, so you can click on here and here you can see the
8:11
font family code. So I can just simply add this code. So I will copy this link here or you can use the import option also
8:20
So let's click on the import option here and I will go to theme code here and I can add
8:28
the input code. And by the way, I don't need the style tag here because I am adding it in the CSS section
8:37
So we have imported this code Merry Weather. So I will simply copy the font family name from here and I will scroll up and change
8:47
the value. So let's change the Lato to Merry Weather. So we have added a custom font here for text font and we have added the system UI for headings
8:59
So let's click on save here. Now let's refresh this page and as you can see the font family is changed
9:08
So if I check the what font chrome extension, the heading is set to system UI and if I check
9:13
the body font, it is changed to Merry Weather. So in this way you can use any custom font or you can use the system UI value in this
9:21
font family option and you can use this system font in your website
9:26
So I hope you got the idea how to change the font family in your blogger website
9:31
And I have already made another video on how to change the font size
9:35
So it is also quite easy. So you can just add the another CSS property here
9:40
So if you check here and I can add a font size property here like that and I can change
9:47
to something like 18 pixel and the font family will change and you can increase the value
9:53
So let's change it to something like 22 and the font size is changed
9:58
So you can just find this class and add the font size value
10:03
I hope you have learned how to change the font family in your blogger website and how
10:07
to change the font size and if you want to know the detailed process of changing the
10:12
font size and you can check the link in the description. And if you found this video helpful, then make sure to hit the like button and if you
10:19
are new to this channel, consider subscribing. So I will see you in the next video
10:23
Thank you
#Arts & Entertainment
#Online Media
#Reference
#Skins
# Themes & Wallpapers
#TV & Video