What is the meaning of font-family?

Question

I'm a beginner in HTML and CSS. I am confused about the font-family property.

I declare font-family as follows:

{
    font-family:cambria, sans-serif, georgia;
}

But when I remove the sans-serif, georgia part, the visual appearance stays the same.

Why declare the font-family and how it is differ from font?

Answer 1

The font-family property specifies the list of font families to be tried, in preference order. It does not affect other font-related properties, except that the choice affects the meaning of normal for line-height (which is font- and browser-dependent).

In contrast, using the font shorthand property always sets all font-related properties, though only font size and font family need to be explicitly specified, e.g. font: 1em Cambria; other properties will then be set to their initial values.

The value of font-family is used so that for each character in the element content, the first font family in the list is used, if a) the font family is available in the user’s system and b) the applicable font in that family contains a glyph for the character. (This is the defined mechanism, but browsers are known to implement it partly incorrectly.)

In the example case, if the user’s system has Cambria and it contains glyphs for all characters in the relevant elements, the other values in the font-family value have no effect. If there is a character that is not present in Cambria but is present in the font used by the browser as the generic sans-serif font, then the latter is used—possibly creating a stylistic mismatch. (Generally, serif fonts like Cambria should have serif fallbacks.) The georgia part would matter only in the very unlikely case where the system has Georgia but lacks Cambria and the browser’s default sans-serif font does not contain some character in the content but Georgia does.

Whether you use font-family (and other specific font properties) or the font shorthand, or both, is a matter of judgment and taste. Conceptually, it is much simpler to set all font properties separately. In terms of code length, font can save you some byes.

Answer 2

The font-family is a CSS property that accepts a prioritized list of font family names that specifies the font for an element. It can take values that are separated by a comma to indicate that they are alternatives if the first font that is indicated on the list is not available on the browser.

{
font-family: cambria, sans-serif, georgia;
}

It means that if the font "cambria" is not available on the browser it will choose "sans-serif" and so forth.

Answer 3

Font family is a list, if the first font you specify cannot be displayed the 2nd font will be loaded, and if the 2nd font can't be loaded the 3rd one will be displayed.

Answer 4

{
font-family:cambria, sans-serif, georgia;
}

mean : if your browser does not support cambria use sans-serif if not support sans-serif use georgia also if not support georgia it will show default font

Font: 12px bold cambria, sans-serif;

mean : font-size / font-weight / font-family

Answer 5

When using font-family, you are declaring specifically the type of font you are going to use. On the other hand, using just the 'font' attribute, you can declare various font styling attributes.

Font-Family: cambria, sans-serif, georgia;

Doing this tells the browser that you prefer to use 'cambria' font, if that font does not exist in this browser though, you would like to use 'sans-serif', and so on.

Font: 12px bold cambria, sans-serif;

This allows you to put multiple values in one place.

Answer 6

The font declaration is a shorthand allowing us to style font-size, font-weight, font-family, font-variant and line-height. all in one. (Just like how background is a shorthand for background-color, background-url, background-image and several other background-related properties.)

font-family itself allows us to specify an initial font, and generic fonts which get used in case the initial font cannot be used. In your case, cambria is the initial font, sans-serif is the fallback font style used if a user's system does not have the cambria font, and georgia is used if no sans-serif fonts exist on the user's system.

Answer 7

Its a prioritized list; try to use the first font, if its not available try the second and so on.

font {} encompasses font-family in that its a way to set several font-* values in a single pass, see here.

Answer 8

You list the fonts in order of desire. The page will try to load with cambria, but if the user doesn't have cambria it will try ANY sans-serif font, and lastly it will try georgia.

Imagine if you were using a very specific font that all users might not have, you'd want to provide a backup so that the system default font doesn't appear in the event the user doesn't have your first desired font.