Welcome to Our Free Tutorial!

CSS - Font

cSS font property to change the look of your text. For example: font family, bold or italic format, font size, font color.

CSS Font Family

<p style="font-family:TimesNewRoman,Arial,serif;">This
is different font family </p>
h4 { font-family: TimesNewRoman; } h5 { font-family: Arial; } h6 { font-family: Serif; }

Display:

This is different font family

This is TimesNewRoman font.

This is Arial font.
This is Serif font.

CSS Font Size:

You can set the size of the text using values, percentages or key term.

CSS Code:

p { font-size: 110%; } 
ol{ font-size: 15px; } 
ul{ font-size: x-large; }

Display:-

This is 110% font size.

  1. This is 15px font size
  • This is x-large font size.

CSS Font Style:

Use the Font style in your page font will be italic or not, possible Key: italic, oblique and normal.

CSS CODE:-

 p { font-style: italic; }
h4{ font-style: oblique; }

Display:

Welcome to the Italick Font style.

Welcome to the Oblique Font style.

Welcome to the Normanl Font style.

CSS Font Weight

  <p style="font-weight:bold;">This text is bold.</p> 

Display

This text is bold.

CSS Font Variant

 <p style="font-variant:small-caps;">This Text Small Caps.</p>

Display

This Text Small Caps.

CSS Font Color:-

h4 { color: red; }
h5 { color: #9000A1; } 
h6 { color: rgb(0, 220, 98); }

Display:

Text Color is Red.

Text Color is Blue.
Text Color is rgb Color.

CSS Font Property:

Font property is the short property that is use to set all font properties in one line.
 <p style="font:italic small-caps bold 20px TimesNewRoman,Arial,serif;">
The font is italic capital latter bold </p> 

Display:

The font is italic capital latter bold