Fonts have a big influence on how a web page feels. However, there's a problem: computers and devices can only display fonts that they know about. You may have a bunch of fonts installed on your computer, but your friend probably has a different set of fonts installed. If your chosen font isn't found, a default font will be displayed instead.
Fortunately, there are a few fonts that are available almost everywhere. If you plan on sharing your web pages with other people, consider using one of these:
A quick brown fox jumps over the lazy dog.
A quick brown fox jumps over the lazy dog.
A quick brown fox jumps over the lazy dog.
A quick brown fox jumps over the lazy dog.
A quick brown fox jumps over the lazy dog.
A quick brown fox jumps over the lazy dog.
Some of these fonts are very similar to each other. There are a few common categories of fonts, such as serif, sans-serif, monospace, and cursive. If you use one of these names instead of a specific font name, all computers and devices should be able to find an appropriate font.
A quick brown fox jumps over the lazy dog.
A quick brown fox jumps over the lazy dog.
A quick brown fox jumps over the lazy dog.
Serif fonts usually feel overly formal to me, so I personally recommend using sans-serif for casual, friendly-looking webpages. Monospace makes aligning text across multiple lines easy, which is useful for script editors like the one you're using now and also for ascii-art.
You can modify the style element below to play with these fonts. Which do you prefer, serif or sans-serif? Can you find a cool font on your computer to use?
If you have an eye for design, you might not be satisfied with the short list of fonts on this page. Go on, use one of the fancier fonts on your computer, and people who have your font installed will get to see it as you intended. But what about everyone else?
Fortunately, CSS allows you to name multiple fonts at once, and the first one that is available will get displayed. Put your preferred fonts at the beginning of the list, and then put a simple category like monospace or sans-serif at the end to make sure everyone gets an acceptable font even if it's not exactly what you had in mind. This is why the setting is called a font-family!
For example, the script editor on the left needed some kind of monospace font, but Courier isn't my favorite, so I picked a couple nicer fonts to try before falling back on the generic monospace category. I'm using these same fonts on the style elements on this page. Try modifying the following style element to set its own font!
Note that fonts should be separated by commas, and specific font names should be enclosed in quote marks. Single quotes or double quotes are fine as long as you're consistent.
When you're ready, let's move on.