Embedding fonts with @font-face1
What is @font-face?
The W3C puts it like this:
The @font-face rule allows for linking to fonts that are automatically
activated when needed. This permits authors to work around the limitation of
“web-safe” fonts, allowing for consistent rendering independent of the fonts
available in a given user’s environment.
Handcrafted CSS
In his new book2, Dan Cederholm says:
“Initially introduced back in CSS2, but then later removed in CSS2.1 only to be added back to CSS3,
@font-faceis an at-rule that allows for embedding font files using CSS declarations. And oh is it simple to implement.”
In other words… you display an image in a web page by specifying a URL to fetch it from, right? You can do that with fonts too. The @font-face rule allows for linking to fonts that are automatically activated when needed.
Pros & Cons
- Pros: No scripting, fully resizable/selectable text.
- Cons: It’s supported in only Firefox and Safari, so treat it as a progressive enhancement technique. There is a way to get it to work in IE, but it is a huge pain in the butt.
How does it work?
- Download the font to your computer.
- Upload it to your server.
- Define your font family name and the file source using
@font-face.
The example from the video
Before
Firefox
After
Firefox
Safari
The code I used
/*Define embedded font name and source file*/
@font-face {
font-family: Diavlo;
src: url(fonts/DiavloMedium-Regular.otf) format("opentype");
}
/*Applies Diavlo to all headings*/
.custom h1, .custom h2, .custom h3, .custom h4, .custom h5, .custom h6 {
font-family: Diavlo, georgia, serif;
}
Further reading
(4)
Loading ...
