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; }
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; }
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; }
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; }
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; }
This is a paragraph. Text was written normally and converted to small caps