CSS Properties

          The font properties in CSS sets the font family, boldness, size, and text style. The font family has two types – generic family and font family. The generic family is the group of font families that has a similar look (see difference between Serif and Sans-serif). Meanwhile, the font family is the specific font family like "Arial" or "Times New Roman".

          font-family – This property sets the font family. It is recommended to have several font names in the font-family property. This is in the case that the first declared font family is not supported by the user's browser, the second font will be used. To have more than one font family, each font will be separated by a comma. You can start specifying the font you want, and end with a generic family, in case there are no other fonts available. For font families with more than one word, it should be in quotation mark (e.g. "Lucida Console") (CSS Fonts, n.d.).

          font-style – To specify an italic text, this property is used. It has 3 values – normal which is the default, italic for italicized text, and oblique which is very similar to italic, but less supported.

          font-weight – This property sets the weight of a font. Some valid values are normal, bold, bolder and lighter.

          font-size – This property sets the size of the text. Common units of the font size include px, em, %, in, cm, mm and pt. The px, in, cm, mm and pt are absolute length units. It means that they have fixed length. On the other hand, em and % are relative length units which specify its length depending on another length property. To understand how these lengths work, see Table 2.