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.

Also, please consider keeping the link back to this website - if you do it will be very much appreciated!

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 Code

Result

<!-- Codes by HTMLcodes.me --> <p style="font:italic small-caps bold 18px/24px Garamond, Georgia, Times, Serif;width:200px;">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.</p> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/text/font-code.cfm">HTML font codes</a></p>

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 Code	Result
<!-- Codes by HTMLcodes.me --> <p style="font-family:Garamond, Georgia, Times, Serif">This text has had it's font changed using the font-family property.</p> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/text/font-code.cfm">HTML font codes</a></p>	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 Code

Result

<!-- Codes by HTMLcodes.me --> <p style="font-size:14px;">This font has been specified using pixels.</p> <p style="font-size:14pt;">This font has been specified using points.</p> <p style="font-size:140%;">This font has been specified using a percentage value.</p> <p style="font-size:large;">This font has been specified using an absolute value (large).</p> <p style="font-size:larger">This font has been specified using a relative value (larger).</p> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/text/font-code.cfm">HTML font codes</a></p>

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 Code	Result
<!-- Codes by HTMLcodes.me --> <p>This text has not had the font-size-adjust applied.</p> <p style="font-size-adjust: 0.58;">This text has had the font-size-adjust applied.</p> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/text/font-code.cfm">HTML font codes</a></p>	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 Code

Result

<!-- Codes by HTMLcodes.me --> <p>This text has not had the font-stretch applied.</p> <p style="font-stretch:wider;">This text has had the font-stretch property applied.</p> <p style="font-stretch:narrower;">This text has had the font-stretch property applied.</p> <p style="font-stretch:ultra-condensed;">This text has had the font-stretch property applied.</p> <p style="font-stretch:extra-condensed;">This text has had the font-stretch property applied.</p> <p style="font-stretch:condensed;">This text has had the font-stretch property applied.</p> <p style="font-stretch:semi-condensed;">This text has had the font-stretch property applied.</p> <p style="font-stretch:semi-expanded;">This text has had the font-stretch property applied.</p> <p style="font-stretch:expanded;">This text has had the font-stretch property applied.</p> <p style="font-stretch:extra-expanded;">This text has had the font-stretch property applied.</p> <p style="font-stretch:ultra-expanded;">This text has had the font-stretch property applied.</p> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/text/font-code.cfm">HTML font codes</a></p>

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 Code

Result

<!-- Codes by HTMLcodes.me --> <p style="font-style:normal;">This font has a font style of 'normal' (i.e. not italic or oblique).</p> <p style="font-style:italic;">This font has a font style of 'italic'.</p> <p style="font-style:oblique;">This font has a font style of 'oblique'.</p> <p style="font-style:inherit;">This font has a font style of 'inherit' (it inherits its style from its parent).</p> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/text/font-code.cfm">HTML font codes</a></p>

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 Code	Result
<!-- Codes by HTMLcodes.me --> <p style="font-variant:small-caps;">This font is being rendered in small caps (<span style="font-variant:normal;">unless of course I override it!</span>).</p> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/text/font-code.cfm">HTML font codes</a></p>	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 Code

Result

<!-- Codes by HTMLcodes.me --> <p style="font-weight:normal;">This text has a font-weight value of: normal</p> <p style="font-weight:bold;">This text has a font-weight value of: bold</p> <p style="font-weight:bolder;">This text has a font-weight value of: bolder</p> <p style="font-weight:lighter;">This text has a font-weight value of: lighter</p> <p style="font-weight:100;">This text has a font-weight value of: 100</p> <p style="font-weight:200;">This text has a font-weight value of: 200</p> <p style="font-weight:300;">This text has a font-weight value of: 300</p> <p style="font-weight:400;">This text has a font-weight value of: 400</p> <p style="font-weight:500;">This text has a font-weight value of: 500</p> <p style="font-weight:600;">This text has a font-weight value of: 600</p> <p style="font-weight:700;">This text has a font-weight value of: 700</p> <p style="font-weight:800;">This text has a font-weight value of: 800</p> <p style="font-weight:900;">This text has a font-weight value of: 900</p> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/text/font-code.cfm">HTML font codes</a></p>

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.