Note: Hey I'm back with more blog tutorials! Have been taking more than a month off from writing tutorials due to sudden reasons in my life, too busy until I only had time to update my blog with my real life. No time for tutorials. >.< But now I'm back :P And first up is this how-to-add-custom-fonts tutorial that I've promised over two months ago. Thanks for the patience!
Looking at other clean, beautiful and professional websites and thinking: HOW do they incorporate such amazing scripts or handwriting fonts into their websites for a unique touch?
You tried putting the fonts installed on your PC up on your blog/website, but unfortunately people using other PCs, other browsers, could not see the special fonts you so carefully chose.
The only way to have those interesting fonts was to turn the words into an image and post it up on the blog as an image. That was the one and only way.
Why? Because the fonts you have are stored in your PC, not in the web. Therefore you can't "share" them with other people viewing your blog. If they don't have it in their PC, they won't see it.
Blogger tried solving this issue by coming out with this cool Template Designer, and it was quite useful because you can then change your fonts for the post title, sidebar titles, post content and everything else to an array of different fonts available in the Designer.
Those fonts are kept in the web by Blogger, so anyone on a Blogger platform will be able to view those fonts.
That is cool as well, but what if you want to take fonts to another level? What if you're getting a little tired of those Blogger fonts? What if there's no font there that you think would be perfect for your blog?
Google Web Fonts is the answer to solving your issue.
There are over 500 open-source fonts there, with new fonts updated regularly. And it's free! And you can add it to your blog anywhere you want, easily. Here's how to do it:
Step 1: Go to this website HERE.
Step 2: Pick a font you like. For example here, I chose the Risque font.
Step 3: Click at the place that says Quick Use.
Step 4: Pick the style you like. Some fonts may have two or more styles, some might have a thinner or thicker shape. Here there's only one style for the Risque font.
Step 5: Don't close the Google Fonts tab. Now open a new tab and go to your Blogger Template, click on Edit HTML to open up the complicated blog code.
Step 5: Now copy the second code from Google Web Fonts.
Step 6: Go over to your long HTML blog code again, and find this: ]]></b:skin>
Paste the second code above that.
Remember to add a { and } before and after.
If you want the font to appear at post title, add a .post-title in front.
If it's for the blog content, add a .post-body in front.
And so on. You can change for the date header, tabs titles, etc.
So mine will look something like this: .post-title {font-family: "Risque", cursive; }
Step 7: Save and view your blog! :D Now your font is installed.
Happy editing!
No comments:
Post a Comment
Do let me know what you think! :)