Surprisingly embed-able opentype fonts have been included in Internet Explorer since version 4. But with the recent release of Firefox 3.5 and Safari, you can now embed Opentype and Truetype fonts across all major browsers. It’s pretty simple and here’s how it’s done.
First you must define your font, basically tell the browser where to get the font file, and what you’re going to call it.
/* For IE */
@font-face {
font-family: 'Komika Display';
src: url('Komika_display.eot');
}
/* For Other Browsers */
@font-face {
font-family: 'Komika Display';
src: local('Komika Display Regular'),
local('KomikaDisplay-Regular'),
url('Komika_display.ttf') format('truetype');
}
@font-face {
font-family: 'Komika Display';
src: local('Komika Display Bold'),
local('KomikaDisplay-Bold'),
url('Komika_display_bold.ttf') format('truetype');
font-weight: bold;
}
@font-face {
font-family: 'Komika Display Kaps';
src: local('Komika Display Kaps Regular'),
local('KomikaDisplayKaps-Regular'),
url('Komika_display_kaps.ttf') format('truetype');
}
@font-face {
font-family: 'Komika Display Kaps';
src: local('Komika Display Kaps Bold'),
local('KomikaDisplayKaps-Bold'),
url('Komika_display_kaps_bold.ttf') format('truetype');
font-weight: bold;
}
ok, now that you have defined your font, you can use it.
body {
font-family: Komika Display Kaps, sans-serif;
}
And here’s what it looks like:
The second part of this tutorial is should you use font-face?
This is another call to your server, which when u have a huge website, isn’t a great thing. But compared to most things on a website, this size is tiny.
You have to consider too, for the designers who need the exact font everywhere this is a better alternative than to cut images for every heading on the website, or for the nav. And bonus! The text is still crawl-able by search engines.
If you enjoyed reading this post, check out these posts Using CSS3’s :target pseudo-class to Make a Slideshow, <!DOCTYPE HTML>.
I wonder, what protects copyright holders for the typefaces? Wouldn’t an embedded typeface need to be publicly accessible to implement custom fonts on the web in this manner? I’m wondering if we’ll see backlash from the professional typography community as this sort of thing becomes more mainstream.
I didn’t know you could do that with CSS. It’s like Flex! Good article Jon
This is an awesome power, which can be abused, but I think that when it comes down to using a font and have it downloaded once, as compared to cutting 10 images for navigation, and maybe more for buttons, then the font would be a better choice.