HTML Font Code

<!DOCTYPE html>
<html>
<head>
<title>Example</title>

<!-- CSS -->
<style>
.example1 {
  font: 16px/22px Garamond, Georgia, serif;
  color: Orange;
  }
.bold {
  font-weight: bold;
  }
.italic {
  font-style: italic;
  }
</style>

</head>
<body>
	
<!-- HTML -->
<div class="example1">
<p>This font is 16 pixels, the line height is 22 pixels, its color is orange, and the font family will be 'Garamond'.</p> 
<p>If the user's computer doesn't have 'Garamond', it will use 'Georgia'. Failing that it will use the default 'serif' font on the user's computer (this is often 'Times' or 'Times Roman' - just leave it as 'serif').</p> 
<p>You can also specify <span class="bold">bold text</span> and <span class="italic">italics</span> if you wish!</p>
</div>

</body>
</html>

The above font code sets common properties such as font size, line height, font family, and font color. Here are some more colors to choose from.

The Font Properties

When coding HTML, CSS is what you use for formatting. Here are the CSS font/text properties:

You can see some of these properties in action below.

Font Family

If you only want to specify the font family, you can use the font-family property:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>

<!-- CSS -->
<style scoped>
.example2 {
  font-family: Helvetica, Arial, sans-serif;
  }
</style>

</head>
<body>
	
<!-- HTML -->
<div class="example2">
<p>Example of the CSS <code>font-family</code> property.</p>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Example</title>

<!-- CSS -->
<style scoped>
.example3 {
  font-size: 20pt;
  line-height: 25pt;
  }
</style>

</head>
<body>
	
<!-- HTML -->
<div class="example3">
<p>Example of the CSS <code>font-size</code> property along with the <code>line-height</code> property to specify the height of each line.</p>
</div>

</body>
</html>

Color

If you only want to specify the font color, you can use the color property (more colors):

<p style="color:orange;">HTML font code is done using CSS.</p>

Bold

You can make your font bold by using the font-weight property:

<p style="font-weight:bold;">HTML font code is done using CSS.</p>

If you only want to bold some of the text inline, you can use the HTML <span> tag:

<p>You can bold <span style="font-weight:bold">parts</span> of your text using the HTML 'span' tag.</p>

Italic Text

You can make your text italic by using the font-style property:

<p style="font-style:italic;">HTML font code is done using CSS.</p>

If you only want to make some of the text italic, you can use the HTML <span> tag:

<p>You can make <span style="font-style:italic">some</span> of your text italic using the HTML 'span' tag.</p>

Web.QHMIT.com