@font-face

Allows the use of online fonts. For examples please see the headlines (e.g. the orange ones) at css3files.com. They are all done using @font-face.

Compatibility

@font-face Firefox 3.6+ Safari 5+, Chrome 10+ Internet Exlorer 9+ Opera 11+

Supported by all modern browsers. For detailed compatibility info see caniuse.com.

Firefox 4+
Safari 5+, Chrome 10+
Internet Explorer 9+
Opera 11+

General description

@font-face {
	font-family: 1"FontName";
	src: 2url('fontfile.eot');
	src: 3url('fontfile.eot?iefix') format('eot'),
	4url('fontfile.svg#FontName') format('svg'),
	5url('fontfile.ttf') format('truetype'),
	6url('fontfile.woff') format('woff');
}

Toggle highlighting

1 The name of the font for the further usage in the stylesheet at the font-family property. If the font should be assigned to all <h2> headlines for example you have to write h2 { font-family: "FontName", sans-serif }. Can be choosen freely.
2 Optional. The eot fontfile. Can be omitted if you don`t want to support Internet Explorer prior to version 9 (including semicolon).
3 Optional. Can also be omitted for Internet Explorer < 9. ?iefix prevents IE6 from interpreting all of the following. If the whole IE family (6 to 9) should be supported, 2 and 3 are needed.
4 Optional. Can be omitted if iPad versions prior to iOS 4.2 shouldn’t be supported. FontName is the same as at 1.
5 The ttf fontfile. Necessary to support (Mobile) Safari and Opera.
6 The woff fontfile for all modern browsers (best choice).

http://www.css3files.com Christian Krammer

That is right, HeArtMe. @font-face works in a broad range of browsers (also older ones like Internet Explorer 6 and 7) and ensures that fonts which are on the webserver of the website can be seen by virtually all visitors. Only older Version of Android and iOS can not display @font-face. Otherwise pretty much everyone should see “your” fonts.

Please see the links at “further reading” for more information about this topic.

http://www.code-designs.co.uk Chris

For @font-face syntax extending on Paul Irish’s Bulletproof syntax (as well as a shed load of free fonts) there’s a brilliant site called fontsquirrel; its brilliant!!
(and no I do not work for them just thought I’d share this)

http://www.css3files.com Christian Krammer

You are right. One of the fonts I use, “Secret Typewriter”, is from FontSquirrel.

http://www.targetweb.it Riccardo

Awesome! thanks nice site!
Gonzalo

@font-face not is css3, is old, check please!

http://www.css3files.com Christian Krammer

I am aware of that, thanks. But as @font-face is one of the key features of CSS3 and only started to show its true potential with “modern” browsers like Firefox and Safari, it should be ok to include it into CSS3.

And even at the W3C it’s filed under CSS3: http://www.w3.org/TR/css3-fonts/#the-font-face-rule
mostwanted

— quote —
CSS Fonts Module Level 3
— /quote—

“Level 3″ does not mean “CSS3″
http://www.css3files.com Christian Krammer

Dear mostwanted, you really should read my above-noted again, since I explicitly state that I’m aware of this fact.

http://dogandrooster.com/_dotCom/ Mark Rivera

Nice. thanks for this cool site info.
However, i noticed sometimes that browser didn’t render it good. kinda sharpy edge and distorted. Is there a way for this to set it smooth or something and better font size?

http://www.css3files.com Christian Krammer

Thank you your note, Mark.

You are speaking of the fonts I use at css3files.com, right? Unfortunately there are great differences at the rendering of online fonts in different browsers. Some, like Chrome and Safari, display it really nice and smooth (also with the help of “-webkit-text-stroke”), others, like Opera and Firefox, aren’t that successful and so the fonts look sometimes a bit “unpolished” and “edgy”. Internet Explorer 9 also handles them quite good.

Could you please tell me which browser you use and which parts of the text exactly doesn’t look that ok for you?
http://dogandrooster.com/_dotCom/ Mark Rivera

hi Chris, thanks for the reply.

Yeah Chrome and Safari did it very well. I’m using both latest browsers such as; FF4, IE9, Safari 5 and Chrome. For the font I’m using, i use Myriad Pro standard and condensed format, and FF4 didn’t render it nice (where in that case, i forcefully wrote suggestion to FF4 to enhance their font rendering, ). Yes, IE9 did quietly good.

From that, i have to use script like Cufon to render it better, but I’m having issues on between Cufon and CSS Less. i don’t know why or is it just me and my coding.

Anyway, I believe your site is very useful to me and to others. Keep it up and cheers!
http://www.css3files.com Christian Krammer

You summed it up just perfect.

I wouldn’t advice to use font rendering services like Cufon. The way to go is definitely @font-face. Everything else is just outdated.

And thank your very much for the compliment.

http://www.atletismobolivia.com Miguel

IE9 is not renderign the bold text. Here is what I’m doing h2 { font:700 20px “Petita”, Arial, Helvetica, sans-serif; padding:8px 0; margin:0; color:#2a2a2a;}

http://www.css3files.com Christian Krammer

Hey Miguel, thanks for the tip, but what exactly are you speaking of?

http://www.atletismobolivia.com Miguel

have implement @font-face in one project and everything is working for Firefox, but when I check the web with IE9 an other versions IE8 also IE7 I don’t see titles (title)in Bold, also I defined a class in css like this “.boldtext { font:700 20px “myfont”, Arial, Helvetica, sans-serif; padding:8px 0; margin:0; color:#2a2a2a;}” and IE show the text in normal weight instead bolder weight.

http://www.css3files.com Christian Krammer

Just try to set font-weight: bold for the desired text. If that doesn’t work the font you want to use doesn’t support bold text resp. it has no such typeface included. In this case you will need to use another font or embed a bold typeface for this font.

http://www.atletismobolivia.com Miguel

Hey! I was trying ith another Font Type and everything works in IE, there’s something wrong with the font type I was using.
Silver

By the way, on IE9 you’ll probably need to use a format declaration of ‘embedded-opentype’ instead of the non-standard ‘eot’. I haven’t done much testing but I certainly have several fonts that IE9 refuses to render in eot format but will do so when declared as embedded-opentype. All the fonts will render when declared in that format, so it may be the more sensible one to use (can’t test below IE9 as I have no older Windows installs around).

It is also worth noting that if a truetype will render in FF but an eot conversion won’t in IE, one possible reason are embedding level settings, which FF ignores but IE does not. Get a tool that allows you to change ttf embed levels, and then reconvert to eot.
http://dogandrooster.com Mark Rivera

Hi Chris.. Hope you doing fine.

I have a question regarding font rendering over Chrome browser. Im a bit disappointed about chrome to perfectly render the thickness of the font though Safari does it even FF and IE. Both Chrome (osx & win) gave the same thin output of my MyriadProLight but it looks good to my FF,Safari and IE.

I use font squirrel font renderer…

Do you have suggestion for this issue or something?

Here’s my sample design.
http://dogandrooster.com/clients/sepulveda/index.php

http://www.css3files.com Christian Krammer

Hey Mark! Which font/part of your site do you refer to? I have compared the output in Chrome and Firefox and the headlines (See our work, Welcome, …) look almost the same. It’s a very little bit thinner in Chrome, but that’s not noticeable.

But apart from that I know this problem. Just look at css3files.com. All the orange headlines and the menu items in the main menu are different in Chrome and FF – they are a bit thicker in the latter. Unfortunately I have found no solution and actually I don’t care – because you know: A website doesn’t have to look the same in every browser. And in this case the differences are really only marginal.
http://dogandrooster.com Mark Rivera

Yeah, i figure it now…
I tried to scale the fonts over but yes, i think i will try to avoid using “light” style on my fonts if the output will look crisp in Chrome and sharp in other browsers… Though there are some ground breaking style that i can alternate to use, and that is css hack…

Liz

Hi there,

Very useful post – thank you. I’ve gotten this font I’m using to work for every browser except Firefox. For some reason it’s being difficult. This is the CSS I used:

@font-face {
font-family: ‘BirchStd’;
src: url(‘birchstd-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘birchstd-webfont.woff’) format(‘woff’),
url(‘birchstd-webfont.ttf’) format(‘truetype’),
url(‘birchstd-webfont.svg#svgBirchStd’) format(‘svg’);
}

I have tried it on both Firefox 7.0.1 and 8.0.1 – do these versions not support it?

http://www.css3files.com Christian Krammer

Maybe you should try it exactly like I have stated it above, that is in the same order, with the same arguments (format(‘eot’) instead of format(‘embedded-opentype’)) etc. It may also be true that the case of the font name is the problem, maybe you use lower case but the actual font name uses some upper case letters?

Pixelutely

Using the @font-face declaration is like loading new fonts on to your operating system. If you want a font that has different weights (thin, book, demi, black, etc) then you need to purchase those weights separately – they are not all contained within a single font file.

The same applies to @font-face. For each weight or variant (e.g. italic) you need to get the font files for it. Therefore if your desired font is required in normal and bold weights, then you will have 2 lots of @fontface declarations in your CSS – one for each (assuming that the font author has actually created different weights/variants!)

Example:

@font-face {
font-family: ‘BirchStdThin’;
….
}

@font-face {
font-family: ‘BirchStdBlack’;
…
}

Hope this clears things up for those who are trying to display different weights of the same font!
http://prochainarretcern.blogspot.com Prefer Anonimity

Heck of a website! I really, really approve of the design, the fonts, the everything. Great job on this.
http://www.skyborough.net David

If you would: do a STEP by STEP demo of making the new fonts ability work. Do not assume we are all coders and just “know” what you are talking about. It would be wonderful to have a step by step demo.

For instance:
1. On your website create a sub-folder off the root folder and call its “fonts” (or some other name.
2. Copy any TTF or (PostScript ???) font you want to use into that folder.
3. Then…

http://www.css3files.com Christian Krammer

I’m really sorry, I can’t help you in this regard. There are tons of tutorial websites out there which teach you how to use @font-face. That’s not the indention of css3files.com, here you can look up all the options to use @font-face, the syntax. But to actually learn it you have to go elsewhere.

Matilde

Thanks so much. I inherited this custom font-face import feature in a client’s website css, and I have been struggling to fix the font-face syntax for a couple of days now… We didn’t have much of a rendering error as a performance issue in the back end, due to the 404 errors consuming resources. Your syntax resolved for me that earlier EI browsers continue reading the block.
Your explanation of the syntax, line by line, help me figure out what I needed to fix and clean out of the css file.
Thanks again!!
Farshad

I have a question about the font class in CSS3 and it properties which unfortunately I wasn’t able to find elsewhere.

I came to this definition in one of the published frameworks around which goes:
font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
I wonder what does it mean to define 14px/21px in the above syntax.

Thank you.

http://www.css3files.com Christian Krammer

14px is the font-size and 21px is the line-height. The font shorthand property allows to summarize these two properties into one.
Like at the border property. Instead of border-width: 1px; border-style: solid; border-color: red you can also write border: 1px solid red. If you need further clarification please tell me and I’ll gladly help.

By the way, font is no CSS3 property, it’s CSS2 or even earlier.

@font-face

Compatibility

General description

Further reading