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.
First, follow the instructions on the font site that you want to use. Most require that you simply add a snippet of code to the top of the page (inside the <head> tags). If you use the Google Font Directory, you’d add it to your website like this:
<link href=’http://fonts.googleapis.com/css?family=Lobster&subset=latin’ rel=’stylesheet’ type=’text/css’>
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:
<style type=”text/css”>
h1 {
font-family: Lobster, arial, serif;
font-size: large;
}
</style>
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>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 most web designers use one of these popular online font services. 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.
Why can’t I see my fonts in Dreamweaver?
Dreamweaver doesn’t support all of the latest of CSS 3 so when you add these fonts to your pages, you won’t see your cool fonts in the Design area (unless you’re using version CS5 or CS6. In these latest versions, you can click on the special Live view button at the top of the workspace and preview the page as it will appear in the latest browsers. Of course, you can always preview your pages in any recent version of Firefox, Safari, Chrome, or IE to test your work and see how the pages really look with your fancy fonts.