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,
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.