You probably have some boring font set up for your blog or website. You can change them to match your blog type, topic or just make it look cooler. Google web font is offering exactly that! With simple code you can use some of the best web font on the web. If you can use little bit of CSS3 with them, believe me- they will chage the whole look and feel of your blog. Besdie font is the main content of your blog, you should make it ook more unique for your reader/customer. Check out the tutorial and links below for the instruction.
How to use Google web-font on a blog/website
1. First we need to link the style for the font you want to use. This is also the choosing part. So go ahead to http://www.google.com/webfonts and choose your favorite. For this tutorial I will choose 'Iceland'.
2. Once you choose a font, click on 'Quick Use'. Once you do that you will see the codes you need to use on you blog or website. You can choose your option of how you want to implant it, but normal standard ways is the best. So just copy the code. Example is below.
<link href='http://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css'>
3. Now add that code in your <head> section of your template. If you are getting error, (blogger will) add '/' before '>' and it will work fine.
4. All we have to do is add the font name and styling to the section of text you want to change the font to. You will find the code you need to add on the same page you got the code from, just scroll down. Example of what I got is below.
font-family: 'Iceland', cursive;
5. You have to add/replace with the code above from your previous font. For example if I want that web font to be my h1 style. I would look for something like this (example, blah blah = css ) :
h1{blah blah; blah blah;}
6. Now if there is any 'font-family' CSS then remove it and paste the code you got it from Google Web Font. Like this.
h1{blah blah; blah blah; font-family: 'iceland', cursive;}
7. And save your template and test your new font! You can use simple
css3 codes inside '{}' to make it look even better. Warning: wrong combination of font and css will look ugly! And if you use too many font borrowed from Google web-font, it may slow down your website.
If you have used a font on your blog or have further questions- let me know in the coment below and I will be happy to help you.
No comments:
Post a Comment