A couple of years ago, all major browsers gained the ability to load fonts supplied over the Internet, not just from the end-user’s computer. It took a while, and there’s still disagreement over the best format, but there’s no need to stick to standard fonts any more. Every browser from iPhone's Safari to Internet Explorer can see much more than Verdana, Arial and Georgia.
Why did it take so long? Licensing, for one. Format confusion is another reason. Today, you can license fonts in many formats using a paid service, or use free fonts in many formats from a free service. Either way, you’ll need to supply the same font in multiple formats to keep everyone happy. They are:
We’ll use the fantastic Font Squirrel to supply our free fonts in this tutorial. They offer hundreds of pre-made @font-face kits, and the ability to generate your own kits from your own fonts. If you’re converting free fonts you didn’t make yourself, be careful not to breach any licenses.
Here, I’ve chosen the Sansumi font, by Manfred Klein.
On this page, choose the @font-face Kit link, then press the large “Download @font-face Kit” button at the bottom — not the Download TTF button at the top.
You’ll now download a .zip package of a number of fonts and some support files. Take a look at the CSS file in Dreamweaver or a text editor, to see something like this:
src: url('Sansumi-Bold-webfont.eot?#iefix') format('embedded-opentype'),
src: url('Sansumi-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
You don’t need to worry about most of this. The important part is the name given after “font-family”: take note of it. This will be the name of the font that you’ll use in your regular CSS rules, just like you’d use the name of a regular font like Verdana. Link to this CSS file, include the fonts, and everything will work. So, let’s do it:
Using the CSS panel, press the “chain link” icon, then Link the “stylesheet.css” stylesheet to your document.
Using the CSS panel again, press the “plus” icon to create a new CSS rule. Choose “Tag” as the Selector Type, then set “h1” as the selector name.
In the font-family field, type “SansumiExtraBoldRegular, Verdana, sans-serif”. Verdana will be used if the custom font can’t be loaded for some reason.
Save, then Preview in the browser of your choice. It should work in just about any Mac browser, though not in Dreamweaver itself. While the custom font is used, text remains selectable and searchable, and overhead is minimal.
It’s also worth adding a CSS rule for the “body” tag to make sure all your text shows up in a custom font. Your added CSS will then be:
font-family: SansumiExtraBoldRegular, Verdana, sans-serif;
font-family: SansumiRegular, Verdana, sans-serif;
When you upload to your server, just include all the files in the folder as you normally would. As with any other design project, be careful not to use too many fonts (one for headings and one for body text should be enough). Finally, be sure to include a bold face if you’re making use of bold text, as different browsers interpret missing fonts differently.
Now go forth, and never use Verdana again.