Hello everyone, today I’m going to tell you about how to change the Blogger’s default font by your own font selected from Google Web Font (www.google.com/webfonts).
What you need for this tutorial:
1. A blog on Blogger
2. Latest version of Mozilla Firefox web browser installed in your PC
This is very important that you should know the basics of Google Web Font service. It will help you to understand this tutorial, because I’m going to use the font that is imported from Google Web Font service. If you are not sure or familiar with Google Web Font service, you can read about it here (https://developers.google.com/webfonts/docs/getting_started).
So, I’ll know show you how to change the default font in Google Blogger. It is not so difficult if you already used the Google Web Font service for your web projects. But for beginners, I’ll say, please read attentively what I’m going to write :)
First, login to your Blogger account and than open a new tab in your browser (Mozilla Firefox). On that new tab, open this URL http://www.google.com/fonts/
To chose a font, Click on Add to Collection
After clicking on Add to Collection button, right after that you will see a window popping up from bottom of the webpage
Click on the Use button
Now you will see a webpage something like this
Now you can choose the Style of your font that you are going to use in your Blogger Blog. To choose the style, just click on the radio button.
Choose character sets you want
Now scroll down and you will see this dialogue box
You can add the fonts to your blog in three different ways,
1. By adding the link code direct to your template (XML code)
2. Import (@import) it using CSS
3. By using JavaScript
But in this tutorial, I’m going to show you the first method, that is, by adding the link code direct to your template XML code.
Copy the all texts from Standard tab. It looks something like this:
<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
And paste it on a Notepad file for further use.
Now scroll down and you will see this:
Copy the font-family and paste it on that previously opened Notepad file for further use.
Now go to your Blogger Dashboard and navigate to Template tab
Inside the Template tab, you will find Edit HTML tab, click on it
Now find the closing tag of <head>, I mean find </head> tag in Edit HTML
Before or above the </head> tag, paste the link code previously pasted on Notepad file
<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
We are almost done :)
It is time to apply our font family to a Heading or paragraph or hover or wherever you want it to apply.
I’m showing an example of how to apply the font family on an Heading tag.
Now go to your Notepad file and copy the entire row of font-family and paste it here
div h1 { font-family: 'Noto Sans', sans-serif; color: your choice; font-size: your choice;}
So guys, here was my little tutorial for you, about how to change the Blogger’s default font. Hope it will help you to make your Blog even more beautiful. Thank you for reading this. Till than bye bye and have a nice time.
