HTML Font Code

Here are some HTML font codes that you can copy/paste straight into your website or MySpace page. Once you've pasted the code, you can change the values as required.

TIP: You can make it easy on yourself by using the text generator.

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.

Quick Example

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

CodeResult

This font is 14pt, the line height is 20pt, it's color is orange, and the font family will be 'Garamond'. 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'). You can also specify bold text and italics if you wish!

Font Family

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

CodeResult

HTML font code is done using CSS.

Font Size

If you only want to specify the font size, you can use the font-size property. You can also use the line-height property to adjust the height between each line:

CodeResult

HTML font code is done using CSS.

Color

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

CodeResult

HTML font code is done using CSS.

Bold

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

CodeResult

HTML font code is done using CSS.

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

CodeResult

You can bold parts of your text using the HTML 'span' tag.

Italic Text

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

CodeResult

HTML font code is done using CSS.

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

CodeResult

You can make some of your text italic using the HTML 'span' tag.

Enjoy this page?

  1. Link to this page (copy/paste into your own website or blog):
  2. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!

Sponsored Link: Design CODE-FREE Websites

Check a Domain:

ZappyHost Logo