Are you bored by the default font-families? I know you are! Don't you wanna add some beautiful new fonts to your website or blog? But, frankly speaking, the default Blogger fonts are quite lame. And even if you do add some unusual font to your blog, you'll always have the fear that it won't be displayed correctly if that font ain't installed in the visitor's computer. So, what now? Google Fonts has the answer!
Tip: Google has provided a dozen of awesome options on Google Fonts homepage! With these extremely-helpful filter options, you can not only find the font you want with great ease, but also sit down and browse around through beautiful fonts so that you can easily compare and decide which font suits your requirements the best!
There are 4 major categories in Google Fonts - serif, sans-serif, display and handwriting. You can also type the sentence in which you want the fonts to be previewed.
For the record, I am going to write a post real soon (mostly also a video tutorial!) about how to use all these awesome options to your advantage so that you can find the font you love! :)
2. Once you have decided which font you wanna use, simply click on the little "Quick-use" icon on the right of that font. Everything from now on is self-explanatory.
3. Most of the times, the font you selected would be available in various "styles" like Thin, Medium, Bold, Extra-bold etc. Select the style you want. (You can also choose multiple styles.) There’s also a handy meter that estimates the impact these fonts will have on your page load time.
Tip: Using many font styles can slow down your webpage, so only select the font styles that you ACTUALLY need on your blog.
4. I recommend not touching the the check boxes under "2. Choose the character sets you want:" unless you really know what you are doing.
5. You will see some code under "3. Add this code to your website:". Copy that code and paste it directly after/below your website/blog's opening <head> tag.
Note: You’ll have three options to choose from: Standard, @import and Javascript. Again, if you don't what you're doing, I recommend you stick to Standard.
6. You're almost done! The Google Fonts API will automatically generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles. For example:
Which fonts do you like? Also, if you wanna know more about Google Fonts API and what wonders it can do, read this article by Google Developers.
Why Use Google Fonts?
- Google Fonts is an awesome collection of beautiful open-source web fonts. Which means that the font will be displayed properly no matter from which computer or smartphone your visitor comes from! The best thing is: all are FREE.
- You don't have to do any programming, all you have to do is add a special stylesheet link to your HTML document and then refer to the font in a CSS style. (You will understand what this means later, have a bit of patience!)
- It doesn't matter if you are using Blogger or Wordpress or even if you have a custom web page, Google Fonts can be easily implemented on any platform.
Live Demo:
Make Your Blog
Beautiful!
This sentence is nothing but ordinary text styled using Google Fonts.
Tip: You can also add your own CSS effects to the text!
Steps to implement:
1. Go to google.com/fonts and find the font you want.
Tip: Google has provided a dozen of awesome options on Google Fonts homepage! With these extremely-helpful filter options, you can not only find the font you want with great ease, but also sit down and browse around through beautiful fonts so that you can easily compare and decide which font suits your requirements the best!
There are 4 major categories in Google Fonts - serif, sans-serif, display and handwriting. You can also type the sentence in which you want the fonts to be previewed.
For the record, I am going to write a post real soon (mostly also a video tutorial!) about how to use all these awesome options to your advantage so that you can find the font you love! :)
2. Once you have decided which font you wanna use, simply click on the little "Quick-use" icon on the right of that font. Everything from now on is self-explanatory.
3. Most of the times, the font you selected would be available in various "styles" like Thin, Medium, Bold, Extra-bold etc. Select the style you want. (You can also choose multiple styles.) There’s also a handy meter that estimates the impact these fonts will have on your page load time.
Tip: Using many font styles can slow down your webpage, so only select the font styles that you ACTUALLY need on your blog.
4. I recommend not touching the the check boxes under "2. Choose the character sets you want:" unless you really know what you are doing.
5. You will see some code under "3. Add this code to your website:". Copy that code and paste it directly after/below your website/blog's opening <head> tag.
Note: You’ll have three options to choose from: Standard, @import and Javascript. Again, if you don't what you're doing, I recommend you stick to Standard.
6. You're almost done! The Google Fonts API will automatically generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles. For example:
Add the font name to your CSS styles just as you'd do normally with any other font. If you know how CSS works, you might probably be applying this to your web page right now!
But for those of you who don't know how CSS works, here are a few examples of how you can add the above given CSS property.
Inline styling:
<div style="font-family: 'Tangerine', cursive;">Techsperia</div>
Suppose you want the font to applied on all the h1 tags, this code will come in handy:
h1{Note: When specifying a web font in a CSS style, always list at least one fallback web-safe font in order to avoid unexpected behaviors. In particular, add a CSS generic font name like serif or sans-serif to the end of the list, so the browser can fall back to its default fonts if need be.
font-family: 'Tangerine', cursive;
}
All this is nothing but normal text which means that you can apply various CSS properties to make it look even more better. Like you can change the font-size, color, add a shadow effect or anything like that!
Here are some fonts that I love and use on Techsperia:
- Tangerine - I use it as my signature.
- Alegreya SC - I use it as the heading of Techsperia Projects (Coming soon!)
Which fonts do you like? Also, if you wanna know more about Google Fonts API and what wonders it can do, read this article by Google Developers.
0 comments:
Post a Comment