Want to get away from ‘Web Safe’ fonts for some attractive headers AND do it without using an image? Use CSS 3 and embed a font-face! There is also the quick + / – guide to which browsers support the herein effect.
NOTE: This article attempts to use an online font file and so your browser MAY attempt to crash… sorry!
In order to use a font, we first must call it using the ‘@font-face’ command. This must be done for each individual font we wish to use.
FIRST THOUGH, lets take a quick history lesson as again in our series we are using a bit of language that is not strictly speaking ‘CSS 3′. The @font-face command has actually been around since CSS 2 and although not appearing in CSS 2.1, CSS 3 it is attempting to bring it into the standards.
Although I’m sure you have a few, you can download some fonts to play with here at dafont.com (they didn’t even pay me for saying that!)
Cross Brower Compatability
As previously mentioned in An introduction to CSS3, not all current browsers support CSS3 yet. Although originally a CSS 2 language, the only browser that currently supports us embedding fonts is Safari.
All articles in the CSS3 will be updated to show future support & development.NOTE: Your browser does take a moment to load the font file so this is by no means the quickest way… images will more than likely still hold a place in our hearts for fancy font headings.
CSS 3 Embedded Font Face
HELLO CSS 3 WORLD!
The above header uses the SketchRockell font with the following CSS 3 applied to it:
- CSS 3 Font Embed (Example I)
- @font-face {
- font-family: SketchRockwell;
- src: url(‘SketchRockwell.ttf’);
- }
- .my_CSS3_class {
- font-family: SketchRockwell;
- font-size: 3.2em;
- letter-spacing: 1px;
- text-align: center;
- }
HELLO CSS 3 WORLD!
If we want, we can even apply the CSS 3 Shadow effect as well
- CSS 3 Font Embed (Example II)
- @font-face {
- font-family: SketchRockwell;
- src: url(‘SketchRockwell.ttf’);
- }
- .my_CSS3_class {
- font-family: SketchRockwell;
- font-size: 3.2em;
- letter-spacing: 1px;
- text-align: center;
- text-shadow: 3px 3px 7px #111;
- }
Current Browser Support (Tested, Jan 2009)
- FireFox (3.0.5)
- FireFox (3.5)
- Google Chrome (1.0.154.36)
- Internet Explorer (IE7, IE8) – [if using an .eot font file, it's actually sorta possible.. =O ]
- Opera (9.6)
- Safari (3.2.1, Windows)
An example for those on alternative browsers, not seeing the embedded font..
Zen Elements Blog | CSS3 Series
- CSS3: Introduction
- CSS3: Border Radius
- CSS3: Border Color
- CSS3: Shadows
- CSS3: Background Images
- CSS3: Multiple Column
- CSS3: Embedding A Font Face
- CSS3: Opacity
- CSS3: RGBA
- CSS3: HSL & HSLA
So, yes it may be quite nice having our favourite fonts for headings and be more friendly for optimization but JINGS doesn’t it take some time to load!?? I think if this is to work, we will need some smaller text files just for our headings.. you know, omitting the characters we do not need perhaps ;)
Subscribe to RSS or Email so you don’t miss the next article!
Thanks for reading,
Alex | Zen Elements
Another good post in your series, Alex! Also, since you asked for it… *cuddles the post affectionately* ;)
I was being hypothetical! I’m sure it liked it though, thank you and I’m glad you enjoyed the post
Opera 10a1, build 1229 presents it properly.
Ah, brilliant. Thank you for the heads up on that :)
Wonderful post, no doubt, but you have mentioned that it works with Firefox 3.0.5; which I am using….and it doesn’t seem to work. Works on Safari very well.
Hi Sonali. I mentioned in this post that FireFox 3.0.5 is incompabitable with the CSS2/3’s @font-embed command.
There was a statement afterwards however suggesting it may be compatible with FireFox 3.1alpha. This I have edited to remove any confusion.
Thanks for the feed back.
Snippet:-
[...] his new post on Plurk. I checked it out, and what a coincidence, the post is presenting the new CSS3 technique: font embedding – btw, Alex has a whole series of pretty good posts on the CSS3 standard and their use. Check them [...]
Why don’t they make this a standard for browsers? It seems WAY better than sIFR…
The good news is that @font-face support is spreading, by mid 2009 most browsers should work. Both Firefox betas and the new Opera alpha support it, leaving only IE with a broken implementation.
Microsoft’s insistence to only support their brain-dead EOT format fonts means that providing universally viewable fonts is a real pain in the neck (the fact that Microsoft’s own tools for creating EOT files doesn’t work is only part of the problem.)
@Andrew | Support is growing across all browsers, still it is at quite a slow pace. The more it is spoken of though, through posts, news groups, social media / networking, etc… the more it is noted by browsers to develop for it, giving it a little more of a push. SO, hopefully by 2025 everything will be supported entirely.. :P
Thanks for the article. As a designer who works in multiple media, the prospect of using embedded fonts to me is simply awesome. For established companies with graphic standards, every time a web page loads they’re either breaking their own standards, or using images or Flash to present fonts that are within spec. The former approach is a shame for designers and companies who work very hard to present a consistent brand to their consumers. The latter approach chooses brand over equally important usability and web standards. Coming from the print world, to suddenly not be able to present my body copy in a chosen font was a big adjustment for me. I would love the opportunity to forget that limitation.
I am only having partial success with the @font-face property. It really depends on which browser you use. I just installed flock 2.5 and ran it through the css selectors test, pretty good :)
I have every beta browser installed now, the slowest is Opera Alpha.
It takes forever with images :Þ Thanks for this great post. I think i have read your entire site now, that’s why i decided to leave a comment.
FireFox 3.5 support it.
@Pascal | it has unfortunately been a little time since I’ve had the time to run through and update the available browser support for CSS3 but thank you for highlighting this. Helps a lot! =]
The future of web typography seems a bit brighter :)
It works on FF 3.5/ IE 7/ IE 8! I just tested this and I’m certainly going to use it in my project.
Great article. I might use the embed font, but actually that’s the only one you can use, as most of the others are just supported in one or two browsers. It’s just sad, things can’t work in all browsers….
This works fine with my Google Chrome 4.0.302.2 dev on Arch Linux.
@urho – Thank you for pointing this out; it has been a while now since these CSS3 articles have been written and I’m afraid browser compatability has altered in a few areas. Along with a new site design (coming soon…) I will be updating the blog and the content therein also. I’ll be sure to re-test browsers and so will keep this in mind too. Thanks again.