The main thing is content and there font matters a lot. If you're feeling that your blog doesn't have beautiful font than you should change the font immediately. Because in the blog, the main thing is content or articles and if you've used any bad font that makes the article difficult than definitely it will affect on your blog visitors and you might loose your visitors.
A great collection of web fonts available on Google Fonts for free from where you can pick up any font and start using it on your blog or web. Google Fonts is one of the most popular place for fonts and almost every website is using fonts from there because there fonts are great and are hosted on Google servers which are really fast. Implementing fonts in our blog is really easy, we just need to add a html link tag below <head> which calls the font to load in our blog and use font-family CSS property to call the font in any web element.
Yes , For newbie blogger, in the following we're showing step by step fonts available in Google.
How To Change & Use Google Fonts in Blogger?
Okay, So here I'm going to divide the tutorial in two pieces just to let you understand it easily. In this part, we'll remove the existing font in your blog and in second part, we'll install and use new font. Let's get started.
1. Removing The Existing Font
- Go To Blogger >> Template >> Backup Your Template
- Click Edit HTML and Search For The Following Code
fonts.googleapis.com
- Will be available below <head> of the templates.
- Finding the above code, you'll see it in the html <link> tag like the image below.
- Remove that html link tagline.
- Save Template.
2. Installing New Font in Your Blog
- Go to Google Fonts and find the font you want to use.
- Choosing font, click on "Quick use" button, shown in the image below.
- Tick mark all the styles
- Scroll down and copy the html link tag code.
- Go To Blogger >> Template >> Edit HTML
- Search For <head>
- Paste The Code Below It and Save Template.
- If it gives error, try adding / before > at the end, after that ending will be like />.
- Okay, now font is installed and lets call it in our template.
- Come back to Google font page and scroll down more.
- There, you'll see the block like below.
- Copy that code and Go To Blogger >> Edit HTML
- Search for body { or body{
- There you'll see font-famiy:bla-bla-bla;
- Remove that font-family property till semicolon and paste the new one there.
- Save Template.
- If the font is not working properly now than add the following code above ]]></b:skin>
body, h1,h2,h3,h4,h5,h6 .post, .post-body, .content-wrapper, .main-wrapper, .outer-wrapper, .footer-wrapper, #content-wrapper, #main-wrapper, #footer-wrapper, #rsidebar-wrapper, .sidebar-wrapper {FONT FAMILY PROPERTY HERE!important}
- Paste the font family property in the highlighted and remove semicolon because we've added !important tag that will call the font importantly in the given areas.
- Save Template
- You're Done!
0 comments:
Post a Comment
If you face any problem, then don't hesitate. Just Sumbit Your Problem In The Comment Section Within 24 Hours. Be Careful We Have Zero Tolerance For Spam !