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; }


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; }


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.


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


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> 


This text is bold.

CSS Font Variant

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


This Text Small Caps.

CSS Font Color:-

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


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> 


The font is italic capital latter bold