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 SketchRockwell 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
- CSS3: Transition
Thank you for reading!
@zenelements // Alex
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
Thank you for this post!
Very good!
This will be very useful.
tks.
cool post, cheers
ultra-pedantic point: in the first demo, you call the font SketchRockell when it should be SketchRockwell. ‘The above header …’
once again, good job
@mcalex – thank you for being ultra-pedantic and noticing this – being rather pernickety myself, can’t believe I missed it! I’m glad you liked the tutorial and hope you got something from it.
Now, we can use any beautifull font face for our site… nice article, but still cant be implemented in IE 6… :(
as browser compatibility is limited – i guess we won’t be saying goodbye to cufonized fonts right away then?
Yay! This is really awesome! ^^
But where can I get the URL of the font I want to use? =)
Thank you!
Its great no longer having to compromise good SEO content when pushing the boundaries of website design!
Let me point out an article in order to implement without any bugs in all browsers (Internet Explorer version 5 or up to Opera, passing through all versions of Safari, Chrome and Firefox) the rule of @ font-face. State of the art have been fixed all the problems of rendering in IE (double rule) and WebKit to render the characters in bold type.
http://www.hightechware.it/sharedtip.php?id=9
Happy reading!
I think you’re missing single quotes around the font-family name. Otherwise, an excellent post! Thank you.
great post!!! will help on my workwear site.
Wonderful website. A lot of useful information here. I am sending it to several friends ans additionally sharing in delicious. And naturally, thanks for your effort!
I have used this successfully on my site, and let me tell you it solves a TON of problems including some big SEO hassles. As old as this post is, it’s still relevant so thanks for keeping it up!
I’m very intrigued about the text shadow, I’ll try on that.