Font Code

This page contains font code. Feel free to copy and paste the font code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.

About Font Code

The font codes in this page are all based on the CSS properties that start with the word "font". For example, font-family, font-size, etc.

You can also find more font/text-based codes at this page on text codes. Those are the CSS properties that begin with the word "text".

The font Property

Let's start with the font property. This is shorthand font code that allows you to set multiple font properties in one go. In particular, it allows you to set the following properties: font-style, font-variant, font-weight, font-size, line-height, and font-family.

Source CodeResult

This amazing piece of text is using font code to set its font properties. As you can see, the font property can set everything from font-variant to line-height, from font-family to font-style.

Font Family

The above example is great for setting many font properties at once. But if you just want to set one or two font properties, you can use the explicit font related properties. Introducing the font-family tag. It's important to note that the font you specify needs to exist on the user's computer. If the user doesn't have this font, the default browser font will be used. Because of this, the font-family property accepts multiple font values (separated by a comma). If the first font cannot be found, it will try the second font. If that can't be found, it will try the third. etc

Source CodeResult

This text has had it's font changed using the font-family property.

Font Size

The font-size property allows you to change the size of the font. There are many possible values. For example, you can specify font size using pixels, points, percentages, and more. Here are some examples:

Source CodeResult

This font has been specified using pixels.

This font has been specified using points.

This font has been specified using a percentage value.

This font has been specified using an absolute value (large).

This font has been specified using a relative value (larger).

Font Size Adjust

The CSS font-size-adjust property is used for scaling the x-height of your font. This can be useful, because, for a given size, some fonts are harder to read than others. You can use font-size-adjust to adjust the x-height to make fonts more legible.

Note: Many (if not most) browsers don't support this tag at the time of writing. If you don't see any difference here, that is probably why.

Source CodeResult

This text has not had the font-size-adjust applied.

This text has had the font-size-adjust applied.

Font Stretch

The font-stretch property is used for stretching the font horizontally. Here are examples:

Note: Many (if not most) browsers don't support this tag at the time of writing. If you don't see any difference here, that is probably why.

Source CodeResult

This text has not had the font-stretch applied.

This text has had the font-stretch property applied.

This text has had the font-stretch property applied.

This text has had the font-stretch property applied.

This text has had the font-stretch property applied.

This text has had the font-stretch property applied.

This text has had the font-stretch property applied.

This text has had the font-stretch property applied.

This text has had the font-stretch property applied.

This text has had the font-stretch property applied.

This text has had the font-stretch property applied.

Font Style

The font-style property allows you to specify italics and oblique font styles. Here are some examples:

Source CodeResult

This font has a font style of 'normal' (i.e. not italic or oblique).

This font has a font style of 'italic'.

This font has a font style of 'oblique'.

This font has a font style of 'inherit' (it inherits its style from its parent).

Font Variant

The font-variant property allows you to specify whether the text should be rendered in small caps or not. Here's an example:

Source CodeResult

This font is being rendered in small caps (unless of course I override it!).

Font Weight

The font-weight property allows you to set bold text. You can specify different levels of boldness, depending on which value you use. Examples below.

Note that browser support for the font-weight property is limited. Most browsers tend to render text in two levels of boldness (bold and normal). Therefore, most web developers simply use font-weight:bold, and sometimes font-weight:normal (to override any previous font-weight settings).

Source CodeResult

This text has a font-weight value of: normal

This text has a font-weight value of: bold

This text has a font-weight value of: bolder

This text has a font-weight value of: lighter

This text has a font-weight value of: 100

This text has a font-weight value of: 200

This text has a font-weight value of: 300

This text has a font-weight value of: 400

This text has a font-weight value of: 500

This text has a font-weight value of: 600

This text has a font-weight value of: 700

This text has a font-weight value of: 800

This text has a font-weight value of: 900

Also see the list of text codes.