The font-family property allows you to
specify a family for your font. A font's family is also sometimes
referred to as it's "face" (in HTML at least). It's what most people
refer to as the "name" of the font, such as Times New Roman, or Arial,
or Verdana. Many people often wonder why this property is named
font-family and not font-name or font-face or something similar? Well,
it's kind of technical but I'll try to explain it. Say, for example, I
have two fonts on my system, "Verdana" and "Verdana Bold". These are
actually two seperate and distinct fonts. They are stored as two seperate
files on my computer. Although these two fonts have different "names"
("Verdana" and "Verdana Bold"), they share the same font "family". They
both belong to the family "Verdana". So that is why if we need to specify
the Verdana font on our webpage, we specify it's font-family property
like so...
font-family: verdana, sans-serif;
You may be wondering "Well, what's the comma there for? And
what's sans-serif doing there?" Well, that's what's called a fallback
font. CSS has this nifty feature when specifying a font-family called
a fallback font. Fallback fonts are used in case the first font you
specify is unavailable. If your second choice font is available, it
tries the third one and so on. Remember, for your font to be viewable
on a client's computer the client must have that font installed on
their system. It is not downloaded with the webpage, it is simply
called upon or "referenced" by the webpage from the operating system.
That is why whenever people write CSS code and specify the font-family
property they usually give it at least one fallback font, in most cases
two. In this case, my fallback font is sans-serif.
You may be saying to yourself "hey, I've never heard of
this sans-serif font before? I thought sans-serif was a
type of font". Well, you're correct. Sans-serif is a
type of font, but in this case it's being used as one of the generic
CSS font families. The creators of CSS allow us to use these 5 special
words in our font-family definition to specify a generic font family.
They are: serif, sans-serif, cursive, fantasy,
and monospace. Generic font families are
basically just "types" of fonts (fonts which have certain
characteristics). They are not actual names of fonts, they simply give
a special instruction to the web browser saying "give me this type of
font, I don't care which one, but make sure it's of this type". In
this case, I'm asking for a font of type sans-serif. Most often the
web browser will return either the Verdana or Arial font because these
are two commonly used sans-serif fonts.
Now that you've learned about fallback fonts you may be
wondering why you can't specify one with Font Tester. You may be
saying to yourself, "All I see in this dropdown list is font names,
I don't see anywhere I can type out a fallback font". Well, the reason
you can't is because I've already done it for you. You see, every time
you choose a font from the dropdown list of font names it automatically
loads up that font's name plus the approriate fallback fonts that you
would most likely choose for that font. For example, Arial is a commonly
used font on webpages. When people specify the Arial font in CSS they
normally type this...
font-family: arial, sans-serif;
In this case I'm using Arial as my primary font and
sans-serif as my fallback font, and this is, in fact, what most
people do. Since the Arial font is a sans-serif type font, if the
Arial font is unavailable, the web browser will simply find another
sans-serif type font to display. Font Tester does this automatically
for you. When you select Arial from the dropdown list, it will place
this exact line in your generated CSS code...
font-family: arial, sans-serif;
I have already done the research for you and figured out
the ideal fallback fonts to use for all of the available fonts you see
in the font-family dropdown list.
Read
an official description of the font-family property from the W3C