Google Fonts

You may already know them, but if you don't there's a whole new world opening to you with Google Fonts.

As Google themselves say about their fonts:

A web with web fonts is more beautiful, readable, accessible and open.
Google Fonts makes it quick and easy for everyone to use web fonts, including professional designers and developers. We believe that everyone should be able to bring quality typography to their web pages and applications.
Our goal is to create a directory of web fonts for the world to use. Our API service makes it easy to add Google Fonts to a website in seconds. The service runs on Google's servers which are fast, reliable and tested. Google provides this service free of charge.

And I couldn't agree more!

If you have ever designed a website and wondered if it's going to look that great in different operating systems, then you know what I mean! 

There are millions of sites suggesting replacement, look-alike and similar fonts to be used in CSS so that your windows designed page renders ok on Macs and under Linux. But that doesn't really cut it, does it.

Google fonts will though. 
Simply because the browser will pull the same font from Google repository for every user. With that your page will look exactly the same on all systems.

There are downsides to this unfortunately. 
It's not really a viable solution for big, heavy traffic sites, because font files will create additional load. 
Also on slower networks your page text might be invisible for as long as the browser takes to download font file.
And last but not least, if you're in need of using special or national characters not all fonts might have them.

The last one is quite easily amended. 
With Google font preview, you may check what's your font going to look like.  The "welcome screen" will show you default sentence:

But you may edit the Preview Text on the fly and see the results straight away:

As in the example above those are definitely not the fonts I'd like to use on a Polish site.

But that's where a set of very good tools comes in handy. 

You can filter fonts to your liking. For example looking only for medium thickness ones, normal slant and going through the list create your collection. Then click on review you will be presented with a couple of possible views.

The one I find most useful for web developers is the Test Drive one, which will create a mock document showing off all fonts from your selection.

Of course you can edit every part of this page too to see results for your special characters or even exact text you'd like to see on your page.

Another great thing to mention about these fonts is that all of them are open source! This is how Google talks about this:

Open Source Fonts
All of the fonts are Open Source. This means that you are free to share your favorites with friends and colleagues. You can even customize them for your own use, or collaborate with the original designer to improve them. And you can use them in every way you want, privately or commercially — in print, on your computer, or in your websites.

We are working with designers around the world to publish quality typeface designs that are made for the web. If you are a type designer and would like to discuss this, please get in touch. 

Many of Google's own web pages are already using Google Fonts, such as Google's About page and Google's World Wonders Project which use Open Sans.
— The Google Fonts Team

And how do you use them?

If you have access to your page CSS file, then you just chose your font, click on "Quick Use" arrow and are presented with the whole description of use, presenting three ways of importing font file:

• Standard
• @import
• Javascript

If you wish to download the font file to your computer to be able to work on it offline or embed it into an offline application, you can:

1. Display the quick use page for a font,
2. Copy the file link, for example: http://fonts.googleapis.com/css?family=Pathway+Gothic+One
3. Display it in your browser, which will give you:
@font-face {

  font-family: 'Pathway Gothic One';
  font-style: normal;
  font-weight: 400;
  src: local('Pathway Gothic One'), local('PathwayGothicOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/pathwaygothicone/v1/Lqv9ztoTUV8Q0FmQZzPqaBfSZ9PF2sGs8WIylam6T2Y.woff) format('woff');
}

4. open the source url (http://themes.googleusercontent.com/static/fonts/pathwaygothicone/v1/Lqv9ztoTUV8Q0FmQZzPqaBfSZ9PF2sGs8WIylam6T2Y.woff) and see it download to your disk.