Web Fonts is another great service provided by Internet search giant Google. They offer a huge collection of fonts online absolutely free. But notice their service behaves slightly different than TypeKit, and actually works a little easier.
You are initially greeted with a wall of text and many different font families. You should choose the fonts you wish to include in your website at first and add them into a single collection. Be conservative with your choices since it does take a lot of bandwidth and loading time to include each resource from Google’s servers.
Try to limit yourself to using 1-3 fonts at most, 5 maximum. Once you’ve chosen your fonts Google will offer you 3 different embedding styles:
- Classic CSS,
@importCSS, and- JavaScript include
The @import works great directly inside your main stylesheet. This will clear up a lot of room in your header as well, most notably since Google’s include statement would be moved elsewhere. I wouldn’t recommend the JavaScript code since it’s very lengthy and a lot slower than either CSS style. But notice how Google does not create default selectors and classes for you.
Instead you’re given the fonts as possible properties for your font-family attributes. Most of the time you can include your font as-is with regular single quotation marks.
As an example including the font family Varela Round would work as such: font-family: 'Valera Round', Helvetica, Arial, sans-serif;
This is one particular reason Google’s service is easier than Typekit. Not to say that Typekit is lacking in options or usability tactics. But Google has the power to offer many more type faces and you can choose which classes/IDs will get to display them. As a web developer you are given more creativity and fluid motion to build as you see fit.
+++From Honkiat.com
MAXSTUDIOTECH 