CSS Font Code Tutorial

You can define the font of text with the use of CSS font properties.

The below HTML and CSS code example shows you how to set the font of text with CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">
h3 {font-family: times;}
h4 {font-family: courier;}
p {font-family: arial;}
</style>

</head>
<body>
<h3>
This is a level 3 header
</h3>
<h4>
This is a level 4 header
</h4>
<p>
This is a paragraph
</p>
</body>
</html>

The above HTML and CSS code produce the following examples, with each having a different font style.

This is a level 3 header

This is a level 4 header

This is a paragraph

Enter the HTML and CSS code into the textbox below to try it yourself.

How to set the font of a paragraph using the "caption" value

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

</style>

</head>
<body>
<p>
This is a normal paragraph </p>
<p style="font: caption">
This is a paragraph with a "caption" font
</p>
</body>
</html>

The above HTML and CSS code makes the below paragraph.

This is a normal paragraph

This is a paragraph with a "caption" font

How to set the font size

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">
h3 {font-size: 150%;}
h4 {font-size: 130%;}
p {font-size: 100%;}
</style>

</head>
<body>
<h3>
This is a level 3 header
</h3>
<h4>
This is a level 4 header
</h4>
<p>
This is a paragraph
</p>
</body>
</html>

The above HTML and CSS code produce the following examples.

This is a level 3 header

This is a level 4 header

This is a paragraph

How to set the size of a font using "font-size-adjust"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

</style>

</head>
<body>
<p>
This is a paragraph.
</p>
<p>
<span style="font-size-adjust: 0.50;">This is a paragraph with a font-size-adjust of 0.50</span>
</p>
<p>
<span style="font-size-adjust: 0.80;">This is a paragraph with a font-size-adjust of 0.80</span>
</p>
</body>
</html>

The HTML and CSS code above will produce the paragraphs below.

This is a paragraph with a font-size-adjust of 0.50

This is a paragraph with a font-size-adjust of 0.80

How to set the style of a font

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">
p.styleone {font-style: normal;}
p.styletwo {font-style: arial;}
p.stylethree {font-style: italic;}
</style>

</head>
<body>
<p class="styleone">
This paragraph has a normal font-style.
</p>
<p class="styletwo">
This paragraph has an italic font-style.
</p>
<p class="stylethree">
This paragraph has an oblique font-style.
</p>
</body>
</html>

The HTML and CSS code example above make the following paragraphs.

This paragraph has a normal font-style.

This paragraph has an italic font-style.

This paragraph has an oblique font-style.

How to set the variant of a font

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">
p.normal {font-variant: normal;}
p.small {font-variant: small-caps;}
</style>

</head>
<body>
<p class="normal">
This is a paragraph with a font-variant of normal.
</p>
<p class="small">
This is a paragraph with a font-variant of small-caps.
</p>
</body>
</html>

The above HTML and CSS code produce the 2 paragraphs below.

This is a paragraph with a font-variant of normal.

This is a paragraph with a font-variant of small-caps.

How to set the boldness of a font

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">
p.normal {font-weight: normal;}
p.bold {font-weight: bold;}
p.thick {font-weight: 600;}
</style>

</head>
<body>
<p class="normal">
This is a paragraph with font-weight of normal.
</pgt;
<p class="bold">
This is a paragraph with a font-weight of bold.
</p>
<p class="thick">
This is a paragraph with a font-weight of 600.
</p>
</body>
</html>

The above HTML and CSS code example produces the 3 paragraphs below.

This is a paragraph with a font-weight of normal.

This is a paragraph with a font-weight of bold.

This is a paragraph with a font-weight of 600.