CSS Tutorial >> CSS Fonts.

Here you will learn about CSS fonts and how they are applied using Cascading Style Sheet. We will also look at how to work around the issue that specific fonts chosen for a website can only be seen if the font is installed on the PC used to access the website. The following CSS properties will be described:

• CSS font-family
• CSS font-style
• CSS font-variant
• CSS font-weight
• CSS font-size
• CSS font

Cascading Style Sheet font-family property is used to set a prioritized list of fonts to be used to display on website or given element. If the first font on the list is not installed on the computer used to access the website, the next font on the list will be tried until a suitable font is found by the web browser.

Syntax:	font-family: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Possible Values:	<family-name> Any font family name may be used for display <generic-family> serif (e.g., Times) sans-serif (e.g., Arial or Helvetica) cursive (e.g., Zapf-Chancery) fantasy (e.g., Western) monospace (e.g., Courier)
Default Value:	Determined by browser
Applies to:	All elements
Inherited:	Yes

CSS font-style property defines the chosen font either in normal, italic or oblique. In the example below, all headlines marked with <h1> will be shown in italics.  Details of CSS Font Style property is as under.

Syntax:	font-style: <value>
Possible Values:	normal | italic | oblique
Default Value:	normal
Applies to:	All elements
Inherited:	Yes

CSS font-variant property is used to choose between normal or small-caps variants of a font in a website. A small-caps font in Cascading Style Sheet is a font that uses smaller sized capitalized letters (Upper Case) instead of lower case letters. Confused? Take a look at these details of CSS Font Variant.

Syntax:	font-variant: <value>
Possible Values:	normal | small-caps
Default Value:	normal
Applies to:	All elements
Inherited:	Yes

The property font-weight describes how bold or "heavy" a font should be presented. A font can either be normal or bold in a website. Some browsers even support the use of numbers between 100-900 (in hundreds) to describe the weight of a text font.  Details of CSS Font Weight is as under.

Syntax:	font-weight: <value>
Possible Values:	normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Default Value:	normal
Applies to:	All elements
Inherited:	Yes

The size of a font is set by the property font-size in CSS.

There are many different units (e.g. percentages or pixels) to choose from to describe font sizes in CSS. In this CSS Tutorial we will focus on the most common and appropriate units. Details of CSS Font Size property is as under.:

Syntax:	font-size: <absolute-size> | <relative-size> | <length> | <percentage>
Possible Values:	<absolute-size> xx-small | x-small | small | medium | large | x-large | xx-large <relative-size> larger | smaller <length> <percentage> (in relation to parent element)
Default Value:	medium
Applies to:	All elements
Inherited:	Yes

CSS Font short hand property it is possible to cover all the different font properties in one single property while using Cascading Style Sheet in a website.

For example, imagine these four lines of code used to describe font-properties for <p>:

Syntax:	font: <value>
Possible Values:	[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
Default Value:	Not defined
Applies to:	All elements
Inherited:	Yes