helpshAck

web design

Finding Your Right Type

11/17/2009 06:55 PM

This has gotten a whole lot easier in the web design world thanks to the recent implementing of the @font-face CSS property. By linking to a saved font file, a designer can now use fonts other than those that come bundled with the computer. Oh, the choices!

Different Font Families

Though I love Helvetica and Arial, I at times need something different to convey a message and am reluctant to do it with a graphic. Now, I have the option of going to one of many font services such as Font Squirrel (free) or Typekit who have many different and interesting fonts. After perusing the large gallery, you can download the font of your choice and save it to your font folder (mine is "type").

Next, the font of choice needs to have multiple versions to be read by multiple browsers. OpenType (OTF) or TrueType (TTF) files are the standard types of font files but Internet Explorer will only use Embedded OpenType (EOT).

An easy way to make alternate font files is to use Font Squirrel's @font-face kit generator. This small, free web utility lets you upload a properly licensed typeface, then gives back the same typeface in many formats.

Now add the @font-face declaration to your style page like this:

@font-face {
font-family: "Your typeface";
src: url("type/filename.eot");
src: local("Alternate name"), local("Alternatename"),
}

Need more deets?

> Nice Web Type - How to use CSS @font-face
> Jason Santa Maria - On Web Typography
> Snook - Becoming a Font Embedding Master

Filed under

Add a comment ( 0 so far )

Commenting is closed for this article.