While working on this website, I ended up trying to figure out which fonts to use. This is always a major stumbling block to a creative project, so these pages are to help you figure out which fonts to use for your own website, so that you needn't spend as much time as I just did.
I'm focusing on the fonts available on Google Fonts, which has, as of this writing, 915 fonts available: 187 Serif fonts, 271 Sans-Serif fonts, 19 Monospace fonts, 138 Handwritten fonts, and 300 fonts labeled "Display," which apparently means "fancy fonts meant to be used in large headings."
A Serif is that little extra bit on the tips of a letter, the things that make them look prettier. Sans-Serif fonts don't have these little extra bits.
The common wisdom is to use Serif fonts for printed material and Sans-Serif fonts for digital material (websites, games). However, that's a myth. Screens have gotten good enough that Serif fonts aren't hard on the eyes like they used to be, and printed material has used Sans-Serif fonts just fine; it all depends on the effect you're trying to achieve.
Personally, I'm looking to use Sans for the base font and Serif for the headers, but that's just personal preference right now.
Anyway, I've grouped the fonts by versatility. If you're only going to use the font for a short title with no added Bold or Italic elements, then having a single style is fine, but if you're going to write text with some emphasis here and there, or strength, then you should pick a font that has all the styles you need (instead of having the computer create faux font styles, which can look pretty bad). Four styles probably has bold, italic, and bold italic just fine; more than that, and you're working with different font weights.
Generic: sans-serif
Generic: serif
Generic: monospace
Fonts where each letter is the same width. Useful for code snippets, ASCII art, and other preformatted text.
(There's no generic for this. Use serif, sans-serif, or monospace.)
Fonts where all the small letters are rendered like capital letters, only (sometimes) slightly shorter. Useful for titles, emphasis, quotes, etc.
Generic: cursive
Fonts that look like cursive handwriting. Useful for quotations, or anything that looks like a handwritten letter. Can be nice for titles as well.
Generic: fantasy
"A decorative font (but focused on characters rather than on icons or pictures)."
These can get weird. Look through the options and figure out a specific reason to use them before you go adding them in.
Near as I can tell, you can freely use these fonts on your webpage, so long as you're not trying to distribute the font files themselves. Writing things with the fonts, or using the font shapes/designs to make other designs, that's fine; the copyrighted part is the underlying software that creates the shapes, and, basically, Google is supplying that.
If licensing comes into play, though, it might be useful to know this: Most of the fonts are available under a very permissive Open Font License. Three (the Ubuntu set) are available under the Ubuntu license, while a couple dozen are distributed under the Apache 2.0 license:
If I'm being particularly finicky later on, I might come sort these into groups by the type of font they are. That might make it easier to tell if you're using an Apache-licensed font. Regardless, I don't think the licenses matter if you're only meaning to publish things (online or offline) using the appearance of the font itself -- only if you end up redistributing the font files themselves.