Monkeybrain Monkeybrain - 8 days ago 4
CSS Question

Where are font families defined?

When I specify the

font-family
property in CSS, I can specify a specific font like "Times New Roman" or I can specify a font family name such as "Times".

Where is it defined that "Times New Roman" is one of the fonts in the "Times" font family, or is it literally just based on the name match?

Answer

As w3c specifies

There are two types of font family names:

  • family-name - The name of a font-family, like "times", "courier", "arial", etc.

  • generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".

So yes, if you want to use the "Times" family you can just specify "Times" but if you'd like to use a specific font inside the family you have to type the complete name of the font (which will be matched, as you say, with the name contained in the font file).

EDIT: A practical example would be the Times Family, that contains multiple typefaces. If you don't specify any (so font-family: "Times"), a "default" one will be chosen (I guess the one with normal weight), otherwise if you set font-family: "Times Semibold" that particular typeface will be used.

EDIT 2: Source

  1. The User Agent makes (or accesses) a database of relevant CSS 2.1 properties of all the fonts of which the UA is aware. If there are two fonts with exactly the same properties, the user agent selects one of them.
  2. At a given element and for each character in that element, the UA assembles the font properties applicable to that element. Using the complete set of properties, the UA uses the 'font-family' property to choose a tentative font family. The remaining properties are tested against the family according to the matching criteria described with each property. If there are matches for all the remaining properties, then that is the matching font face for the given element or character.
  3. If there is no matching font face within the 'font-family' being processed by step 2, and if there is a next alternative 'font-family' in the font set, then repeat step 2 with the next alternative 'font-family'.
  4. If there is a matching font face, but it does not contain a glyph for the current character, and if there is a next alternative 'font-family' in the font sets, then repeat step 2 with the next alternative 'font-family'.
  5. If there is no font within the family selected in 2, then use a UA-dependent default 'font-family' and repeat step 2, using the best match that can be obtained within the default font. If a particular character cannot be displayed using this font, then the UA may use other means to determine a suitable font for that character. The UA should map each character for which it has no suitable font to a visible symbol chosen by the UA, preferably a "missing character" glyph from one of the font faces available to the UA.