Any font you want on a web page: A ransom note

How to add fonts to a Web site with CSS3

Thanks to the latest advances in web browsers and CSS3, you can link almost any font to a web page. There are many ways to add fonts to your web pages today, but the simplest option is to use a font from one of the online collection websites. Follow this link to discover where you can find fonts to use on your web pages.

You can host fonts on your web server, but it's easier to use a font from one of the font collection sites. Once the font is on a server (or you copy the code from a collection) you simple add a snippet of code to the top of the page (inside the <head> tags) like this:

To make the font appear on your page, you also have to create a CSS style rule that includes the font. In this example, you see a style that would make all text formatted with the Heading 1 tag use the Lobster font that we linked to the page:

And finally, when you format text with the Heading 1 tag...

<h1>With that formatting, the heading 1 text will be displayed in the Lobster font</h1>

Note:The fonts on this page only display in the lates tweb browsers that support the @font-face rule.

Here's another example. You can create any kind of style, such as this class style to apply fonts like this:

.josefin {

font-family: 'Josefin Sans Std Light', arial, serif;

}

Remember, class styles, like .josefin above, can be applied to any number of tags, including heading and paragraph tags, like this:

<p class="josefin">This is how you'd format the HTML to apply a class style like .josefin to use the Josefin Sans Std Light font to format this sentence. </p>

Why can't I use any font on my hard drive on my web pages?

The technical details of how the @font-face rule works are complicated by the the fact that not all web browsers have agreed to support the same font types so you can't just link to one font type for each font, you have to link to all of the font types used by browser today.

The big change happened with the release of Safari 3.1, which supports two of the most common font options, True Type .ttf and OpenType .otf fonts.

Before that, the only font supported was the Embedded Open Type .eot format, which dates back to CSS 2.

So along comes the promise of CSS 3 and now most browsers support the @font-face rule, they just don't all agree on the font types...

To reach all of the browsers that support @font-face with your own font collection, you need to make the fonts available in all three font types, .ttf, otf, and .eot. That's why services, such as FontSpring.com and FontSquirrel.com are so helpful. They do all the hard part for you, from securing the rights to fonts, to hosting them, to making sure all of the font types are available.

Dreamweaver Warning about the @Font-Face Rule

Dreamweaver doesn't support all of the latest of CSS 3 so when you add these fonts to your pages, you won't see them displayed in the design view in Dreamweaver. You'll need to preview your pages in a recent version of Firefox, Safari, Chrome, or IE to test your work and see how the pages really look.

Discover where you can find fonts to use on your web pages.

Test your pages in more browsers (and browser versions) than you have on your computer: Many of the latest CSS features don't work in older web browsers so it's important to test your work to make sure your pages are at least readable in all of the most popular browsers.

How to add fonts to a Web site with CSS3

Why can't I use any font on my hard drive on my web pages?

Dreamweaver Warning about the @Font-Face Rule

Related Articles