CSS3 Embedding @font-face
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!
NOTE: This article uses font file stored online and your browser may run slow or attempt to crash… sorry!
@font-face is not strictly speaking ‘CSS3′; it was originally born in CSS 2 and although not appearing in CSS 2.1, CSS 3 is attempting to bring it into the standards.
In order to use a font, we first must call it using the ‘@font-face’ attribute and this must be done for each individual font we wish to use. Although I’m sure you have a few, you can download some fonts to experiment with here, at dafont.com.
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;
- }
CSS3 can render type using several font formats: “truetype” (ttf), “opentype” (otf), “embedded-opentype” (eot) and “scalable-vector-graphic” (svg,svgz).
HELLO CSS 3 WORLD!
We can also apply additional effects such as a Text Shadow.
- 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;
- text-shadow: 3px 3px 7px #111;
- }
NOTE: For some reason, using both @font-face and text-shadow will cause problems in Google Chrome. The reason IE has been given a ‘?’ next to it for the @font-face attribute, is because it will work using the popular .eot font file…
An example for those on alternative browsers, not seeing the embedded font..
The Zen Elements CSS3 Series
- CSS3: Introduction
- CSS3: Border Image
- CSS3: Border Color
- CSS3: Border Radius
- CSS3: Box Shadow
- CSS3: Font Face
- CSS3: Gradients
- CSS3: HSL & HSLA
- CSS3: Multiple Column
- CSS3: Multiple Images
- CSS3: Opacity
- CSS3: RGB & RGBA
- CSS3: Text Shadow
- CSS3: Transform
Thank you for reading!
Alex | @ZenElements
�)
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.
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.
I’m looking at Impact. Looks like your font isn’t being loaded.
Thank you for pointing that out! I must not have redirected the stylesheet since moving host & domain. Thank you again and hope you liked the post, besides that tiny slip-up! =]
Chrome 4 supports this entirely.
why on my IE7 the font not show ?? can you help me
Great post. Thanks. But I just confused on “Current Browser Support (Tested, Jan 2009)” section. It is not clear which browser is supported. If you use a “cross” and “tick” icon for those section will be much visualized for readers.
Hi, the 2nd demo(apply shadow effect) is not showing on Chrome(ver 4.1.249.1045)…
Hi Brian and thank you for posting; I’ve very recently (silly hours of this morning) updated things all through the CSS3 Series including article content and providing a new shiny compatibility check too. I hope the shadow is displaying correctly for you now though as in testing it appeared and the text-shadow is supported in Chrome.
Hi Alex, thanks for reply :)
Both text-shadow and font-face are supported in Chrome, however, if apply both 2 effects together, Chrome won’t display the text.
Please view this screen cut
http://img69.imageshack.us/img69/41/20100404040858.jpg , the embedded font with shadow effect is not showing.
It Seems not to be working ,i tried the same code and uploaded the font to the website !
but it doesn’t work unless i have the font installed in my PC but for your website i don’t have the fonts that u use installed and i still can see them ,…. what’s wrong ?? do i have to have the fonts installed in my PC or shouldn’t I ???
@Creative59: You shouldn’t need to have the font installed on your computer for this to work, so a quick question or two:
What CSS & Markup are you using?
What font file are you trying to use in your own example?
If you have your (non)working example up online somewhere, I’d be happy to take a look at it for you.
Alex / @ZenElements
I Managed to do it thnx man i used the @font-Face kit and i copied the code ! from that website
http://www.fontsquirrel.com/fontfacedemo/WC-RoughTrad
Nice post.
Great series as well