Downloadable Fonts are Here! (sort of)
Surf with Safari and see more fonts.
Are you tired of the limited fonts at your disposal as a Web designer? I know I am. But, that changed yesterday when Apple released Safari 3.1 which includes the ability to download common Open Type and True Type fonts to be used in your Web designs without having to install them on the users computer first. Make no mistake, this is the beginning of a revolution in Web design. And I mean an actual revolution—not like the way the word “revolution” is used in TV commercials to make you think you are doing something new when you actually are doing the exact same thing only paying for it—since Apple is openly revolting against the status-quo established by the dominant player in the browser market.
I saw this demoed at the W3C conference last fall, so I wasn’t too surprised that Apple could do it, but I am surprised that they are willing to throw down the glove to Microsoft who is opposed to allowing fonts to be used without a strict DRM system in place to not only prevent fonts from being misused either in sites they are not licensed for.
CSS has included all of the syntax need to download fonts for years, the only thing holding typography on the Web back was that the browser makers could not agree on a common font file format to support. Microsoft recently offered to open their proprietary .eot format, but many considered it too little too late. With Safari 3.1, you can now add any True Type (.ttf) or OpenType (.otf) fonts that you have at your disposal.
To add a downloaded font to your design, first upload the file to your server, then you simply have to define your font family name and the file source using @font-face:
@font-face {
font-family: Diavlo;
src: url(’Diavlo_BOOK_II_37.otf’);
}
and you have to that for all bold and/or italics versions:
@font-face {
font-family: DiavloLight
src: url(’Diavlo_LIGHT_II_37.otf’);
}
@font-face {
font-family: DiavloHeavy;
src: url(’Diavlo_BOLD_II_37.otf’);
}
and you can then use the font-family name in your CSS:
h1 { font-family: Diavlo,sans-serif; font-weight: normal; }
h1.light { font-family: DiavloLight,sans-serif;}
h1.heavy { font-family: DiavloHeavy,sans-serif; }
NOTE: I’m using a free Open Type font, Diavlo, that I got from exljbris.
Take a look at this code in action in Safri 3.1 or take a look at the reference image underneath to see what you are missing. Whether you are a Mac or Windows user, you can get the most recent version of Safari from Apple and Linux users can use Wine to run Safari.
It’s that easy!You may have to get your Sys-admin to add the correct MIME types if your server does not currently have the .otf or .ttf file formats set-up, but that’s about it. Font’s will also (obviously) increase download time, but not nearly as much time as the same text in graphics and they will be cached. And that’s where Microsoft’s biggest complaint comes in: it’s so easy how do you stop illegitimate use of these fonts.
To be honest, although I do understand that the font makers need to be compensated for their hard work, nothing from nothing still leaves nothing. Once designers can start using any font they want in their designs, we are going to see an explosion of fonts purchased for legitimate use on the Web which can only be a good thing for the type-foundries.
[...] Firefox and Safari now include the ability to download the two most common font file format types Open Type (OTF) and [...]
[...] of fonts other than the core Web fonts. Anyone using fonts from the Web-safe fonts list or using @font-face to download fonts would be [...]