CSS Fonts Styling




CSS Font Family

To set the font family of an element you must use the font-family property.

selector { font-family: value (font name 1, font name 2 and etc); }

Example: setting the font-family of a paragraph and header.

p { font-family:Arial, Helvetica, sans-serif; }
h4 { font-family:"Times New Roman", Times, serif; }
Result:

This is a paragraph

This is a header

Remember: If the name of a font family is more than one word, it must be in quotation marks like: "Times New Roman". Always define more than one font, if the browser does not support the first font, it tries the next font.

Take a look at safe to use font families here: web safe fonts

CSS Font Size

To set the font size of an element you must use the font-size property.

You can set the size of fonts by using values (pixels or em), percentages, or key terms.

The common key terms are:

  • xx-large
  • x-large
  • large
  • medium
  • small
  • x-small
  • xx-small

Example

p { font-size: 80%; }
h4 { font-size: 15px; }
span { font-size: large; }
Result:

This is a paragraph ( font size 80% )

This is a header ( font size 15px )

This is a span ( font size "large" )

CSS Font Style

With property font-style you can define a font will be italic or not. Possible key terms are the following: normal, italic and oblique ( oblique is similar to italic, but less supported ).

Example

p { font-style: italic; }
Result:

This is a paragraph.

CSS Font Weight

Property font-weight defines the weight of a font ( its thickness ). You can set the weight of fonts by using values ( from 100 (thin) to 900 (thick)), or key terms ( normal, bold, lighter and bolder ).

Example

p { font-weight: bolder; }
h4 { font-weight: lighter; }
Result:

This is a paragraph.

This is a header.

CSS Font Variant

Font-Variant property allows convert your font to all small caps ( not all fonts supports ).

Example

p { font-variant: small-caps; }
Result:

This is a paragraph. Text was written normally and converted to small caps