Fonts

CSS allows you to refine font characteristics using various properties and values.

Font Family

The font-family property is used to specify the fonts the browser uses to render a character.

The values are comma-separated lists of fonts.

Family name - (e.g. Arial, "Times New Roman", etc.) Font Family names containing spaces should be quoted. Font Generic font names (e.g. serif, sansserif, cursive) are keywords and must not be quoted.

Note
It is recommended that the last font name in the list be a generic font name.
example
font-family : Garamond, serif, "Times New Roman" 
font-family : Courier, serif, "MS Courier New"
snippet
<html> 
<head> 
    <style> 
        p {font-family:"Times New Roman", Garamond;} 
        div {font-family:"Arial"} 
        h1 {font-family:"Times New Roman", Garamond;} 
        h2 {font-family:"Arial"} 
        span {font-family:"Arial"} 
    </style> 
</head> 
<body> 
    <p>This is a paragraph text</p> 
    <div>This is a text inside div</div> 
    <h1>This is a h1 text</h1> 
    <h2>This is a h2 text</h2> 
    <span>This is a text inside div</span> 
</body> 
</html>
Output

This is a paragraph text

This is a text inside div

This is a paragraph text

This is a paragraph text

This is a text inside div
Font Style

The font-style property is used to specify the font style the browser uses to render a character.

The values of font-style are.

ValueDescription
normal
italic Cursive
obliqueSlanted, Incline
inherit inherited from the parent
example
 font-style : normal 
 font-style : italic
snippet
<html> 
<head> 
    <style> 
        p {font-style:normal;} 
        div {font-style:italic} 
        h1 {font-style:normal;} 
        h2 {font-style:italic} 
        span {font-style:oblique} 
    </style> 
</head> 
<body> 
    <p>This is a paragraph text</p> 
    <div>This is a text inside div</div> 
    <h1>This is a h1 text</h1> 
    <h2>This is a h2 text</h2> 
    <span>This is a text inside div</span> 
</body> 
</html>
Output

This is a paragraph text

This is a text inside div

This is a h1 text

This is a h2 text

This is a text inside div
Font Variant

The font-variant property is used to specify the font variant the browser uses to render lowercase character.

The values of font-variant are.

normal
small-capsSimilar to uppercase characters but smaller in size
inheritinherited from the parent
example
 font-variant : normal 
 font-variant : small-caps
snippet
<html> 
<head> 
    <style> 
        p {font-style:normal;} 
        div {font-style:small-caps} 
    </style> 
</head> 
<body> 
    <p>This is a paragraph text</p> 
    <div>This is a text inside div</div> 
</body> 
</html>
Output

This is a paragraph text

This is a text inside div
Font Weight

The font-weight property is used to specify the font weight(boldness or lightness) the browser uses to render the characters.

The values of font-weight are.

ValueDescription
normalequal to '400'
boldequal to '700'
bolderthe next darker value upto '900'
lighterthe next lighter value down to '100'
100|200|300|400|500|600|700|800|900
inherit inherited from the parent
example
 font-weight : bold 
 font-weight : bolder
snippet
<html> 
<head> 
    <style> 
        div {font-style:normal; font-family:Arial} 
    </style> 
</head> 
<body> 
    <div> 
        <span style="font-weight:normal">font-weight : normal</span> 
        <span style="font-weight:bold">font-weight : bold</span> 
        <span style="font-weight:bolder">font-weight : bolder</span> 
        <span style="font-weight:lighter">font-weight : lighter</span> 
        <span style="font-weight:100">font-weight : 100</span> 
        <span style="font-weight:200">font-weight : 200</span> 
        <span style="font-weight:300">font-weight : 300</span> 
        <span style="font-weight:400">font-weight : 400</span> 
        <span style="font-weight:600">font-weight : 600</span> 
        <span style="font-weight:900">font-weight : 900</span> 
    </div> 
</body> 
</html>
Output
font-weight : normal font-weight : bold font-weight : bolder font-weight : lighter font-weight : 100 font-weight : 200 font-weight : 300 font-weight : 400 font-weight : 600 font-weight : 900
Font stretch

The font-stretch property is used to specify the font stretch(condensed or expanded) the browser uses to render the characters.

The values of font-stretch are.

ValueDescription
normal
widerrelative to the inherit value
narrowerrelative to the inherit value
ultra-condensed | extra-condensed | condensed | semi-condensed
semi-expanded | expanded | extra-expanded | ultra-expanded
inheritinherited from the parent
example
 font-stretch : narrower 
 font-stretch : expanded
snippet
<html> 
<head> 
    <style> 
        div {font-style:normal; font-family:Arial} 
    </style> 
</head> 
<body> 
    <div> 
        <span style="font-stretch:wider">font-stretch : normal</span> 
        <span style="font-stretch:narrower">font-stretch : bold</span> 
        <span style="font-stretch:ultra-condensed">font-stretch : bolder</span> 
        <span style="font-stretch:condensed">font-stretch : condensed</span> 
        <span style="font-stretch:semi-expanded">font-stretch : semi-expanded</span> 
        <span style="font-stretch:expanded">font-stretch : expanded</span> 
    </div> 
</body> 
</html>
Font size

The font-size property is used to specify the font size(baseline to baseline) the browser uses to render the characters.

The values of font-size are.

ValuesDescription
<absolute-size> xx-small | xx-small | small | medium | large | x-large |xx-large
<relative-size> larger | smallerrelative to the parent value
<length>
<percentage>relative to the parent value
inheritinherited from the parent
example
font-size : x-small 
font-size : large 
font-size : x-small 
font-size : large
snippet
<html> 
<head> 
    <style> 
        ol{color: red;} 
        ul{color: blue;} 
    </style> 
</head> 
<body> 
    <ul>Length 
		<li style="font-size: 1.2em">1.2em 
		<li style="font-size: 1.2ex">1.2ex 
		<li style="font-size: 20px">20px 
		<li style="font-size: 0.5in">0.5in 
		<li style="font-size: 5mm">5mm 
		<li style="font-size: 15pt">15pt 
		<li style="font-size: 2pc">2pc 
    </ul> 
 
    <ul>Absolute Size 
		<li style="font-size: xx-small">xx-small 
		<li style="font-size: small">small 
		<li style="font-size: large">large 
		<li style="font-size: xx-large">xx-large 
    </ul> 
 
    <ul>Relative Size 
		<li style="font-size: larger">larger 
		<li style="font-size: smaller">smaller 
    </ul> 
 
    <ul>Percentage 
		<li style="font-size: 50%">50% 
		<li style="font-size: 100%">100% 
    </ul> 
</body> 
</html>
Output
Font aspect value

The 'font-size-adjust' properties allows to specify the font aspect value (the ratio between the font-size value and the x-height) the browser uses to render characters. The normal values are 0.58 for Verdana and 0.46 for Times New Roman. Because of this, the Verdana fonts remain legible at small sizes.

The possible values are.

ValuesDescription
normal
<number>
inheritinherited from the parent
example
font-size-adjust : normal 
font-size-adjust : 0.58
snippet
<html> 
<head> 
    <style> 
        ol {font-family:Arial;} 
        ul {font-family:Verdana;} 
    </style> 
</head> 
<body> 
    <ol>Times New Roman 
        <li style="font-size-adjust:  0.33;">0.33</li> 
        <li style="font-size-adjust:  0.55;">0.55</li> 
        <li style="font-size-adjust:  0.99;">0.99</li> 
    </ol> 
 
    <ul>Verdana Fonts 
        <li style="font-size-adjust:  0.33;">0.33</li> 
        <li style="font-size-adjust:  0.55;">0.55</li> 
        <li style="font-size-adjust:  0.99;">0.99</li> 
    </ul> 
</body> 
</html>
Output
    Times New Roman
  1. 0.33
  2. 0.55
  3. 0.99
    Verdana Fonts
  • 0.33
  • 0.55
  • 0.99
Font
The font property is used as a shorthand to specify the font the browser uses to render characters. The possible values.
ValuesDescription
<font-style> <font-variant> <font-weight> <font-size>/ <line-height> <font-family>
caption | icon | menu | message-box | small-caption | status-bar
inheritinherited from the parent
example
font: italic small-caps 600 15pt/18pt Arial, serif 
font: 110% "Times New Roman", Garamond, serif 
font: 110%/120% "Courier New", fantasy
snippet
<html> 
<head> 
    <style> 
        ol {font-family:Arial;} 
        ul {font-family:Verdana;} 
    </style> 
</head> 
<body> 
    <ul>The 'font' property 
        <li style="font: italic small-caps 600 15pt/18pt Arial, serif;">italic</li> 
        <li style="font: oblique border 0.2in/0.3in Arial, serif;">oblique</li> 
        <li style="font: 20px/28px fantasy">20px/28px fantasy</li> 
        <li style="font: 150%/200% Verdana">150%/200% Verdana</li> 
        <li style="font: 1.1pc cursive">1.1pc cursive</li> 
    </ul> 
</body> 
</html>
Output
    The 'font' property
  • italic
  • oblique
  • 20px/28px fantasy
  • 150%/200% Verdana
  • 1.1pc cursive
Font Download
CSS2 allows the designer to describe and download custom-made fonts. This is made possible by a @font-face block inserted into the style sheet. The @font-face block contains rules that describe the font. The rules is given below. It defines the internet address for the font that will be downloaded and used by the browser for rendering.
src : <url> - url
Font extensions:
prf, .eot, .ttf, .pfb, .pfa
snippet
<style> 
@font-face {font-family: Fella; 
			font-size: 15pt; 
			src: http://www.quotefellas.com/fonts/fella.ttf;}				 
p {font: Fella; color:red} 
</style>
Related Tutorial
9 Font
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #