Google has a large collection of web fonts in their site www.google.com/webfonts. These fonts are nice looking and you can use them to make your blog more attractive. In this tutorial I will teach you how you can add these fonts in your blog.
From their site add your chosen fonts to your collection by clicking on “Add to Collection”. Once you have chosen your fonts you would like to use, click the use button in the blue collection toolbar at the bottom of the page.
You will simply redirect to another page where you can deselect any of your fonts and find some codes.
Now you will add a CSS link in your template. You will find this link in the page which is redirected after clicking on "use". On that page scroll down and you will find some codes in a blue box. Copy these codes.
Now open your blogger template. Just go to Dashboard – Template – Edit HTML – Proceed. Then paste the codes below the <head> tag.
Now you need to specify your fonts in your CSS codes. Like before scroll down again and you will find other codes in a grayish box.
You'll paste these codes into your CSS after allocating it to a specific element. Suppose, you want to use these fonts in the body text of your blog. Just go to Dashboard – Template – Edit HTML – Proceed. Now press CTRL+F and search for .post-body.
Below the first second bracket “{“add the codes you have copied. See an example below:
If you can’t understand anything of this tutorial please make comments. I am always ready to help you. Besides, if you want to use the fonts in other elements like header, widget headers… please make comments. Thanks for reading my post and don’t forget to share it.
First: Choose your fonts
From their site add your chosen fonts to your collection by clicking on “Add to Collection”. Once you have chosen your fonts you would like to use, click the use button in the blue collection toolbar at the bottom of the page.
Second: Add CSS link in your template
Now you will add a CSS link in your template. You will find this link in the page which is redirected after clicking on "use". On that page scroll down and you will find some codes in a blue box. Copy these codes.
Last: Specify the fonts in your CSS
Now you need to specify your fonts in your CSS codes. Like before scroll down again and you will find other codes in a grayish box.
.post-body {
font-family: 'Average Sans', sans-serif;
font-size: 110%;
line-height: 1.4;
position: relative;
} Now save your template and you will be done.Conclusion
If you can’t understand anything of this tutorial please make comments. I am always ready to help you. Besides, if you want to use the fonts in other elements like header, widget headers… please make comments. Thanks for reading my post and don’t forget to share it.
.jpg)
Hi! I am Abdur Rakib, a student and a part time blogger from Bangladesh. This is my first blog. I trying to improve it every time. I am not a professional blogger and still learning how to blog :)
0 comments:
Post a Comment
Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name (You Know Who You Are).