The Essential Guide to @font-face

The Essential Guide to @font-face

Fonts on the Web

The days of being limited to a handful of fonts on the web are very close to being a thing of the past. The problem is no longer a lack of viable solutions, but rather, an abundance of them.

Technologies like Cufon, sIFR, FLIR and @font-face all represent different groups of developers placing bets on what they believe to be the future of web typography.

There is, as of yet, no consensus in this ever-evolving game. All of these methods have perfectly valid arguments both for and against their use.

Further, even the most popular browsers support each of these technologies in widely varying degrees.

However, the @font-face CSS method is among the strongest, simplest and most flexible competitors in this game. It seems to be the current rockstar of the bunch, garnering all the attention and causing a number of sites to pop up offering both free and premium fonts in support of it.

This guide will teach you how to implement @font-face with cross-browser compatibility and will also look at a number of the supporting services that have arisen, making it even easier to use custom fonts in your web designs.

Licensing and Free Fonts

Font licensing presents one of the largest headaches and stumbling blocks to great typography on the web.

Naturally, font foundries would like to be paid for their work and therefore place strict restrictions on the use of their fonts.

These foundries have teamed up with various premium @font-face solutions that we’ll discuss later in the article, but for now, we’ll just dodge the licensing problem completely by using a free font.

The web font licensing problem has caused a major rise in the popularity of sites offering quality free fonts. Among these, the two that I like the best are Font Squirrel and Fontex. These sites both provide tons of great resources absolutely free and even share many of the same font choices.

The Basic Syntax

@font-face only requires a few lines of CSS and is therefore very easy to use without any third party tools.

To get started, stop by one of the free font sites mentioned above and download Chunkfive (or any other font you like).

Once you’ve downloaded the font, place the font file in the root directory of your web page.

Now, go into your stylesheet and insert the following code:

@font-face {
	font-family: Chunkfive;
	src: url('Chunkfive.otf');

This snippet gives the custom font an identifier for the rest of your CSS and then points to the font file to use when this identifier is mentioned.

The first line in my code sets an identifier of “Chunkfive” to the font. It’s best to keep things simple by always using the font name, but you can ultimately use any name you want. “MyReallyCoolFont” would work just as well as long as you refer to the font elsewhere using the same name.

The second line tells the browser that when “Chunkfive” is called, it should load the font Chunkfive.otf file from the url mentioned. This url is simply wherever you choose to place your fonts file. If you had placed Chunkfive in a folder called Fonts, this attribute would’ve read url(Fonts/'Chunkfive.otf').

When you want to use that font anywhere in your site, simply build a font stack like you would normally, using your custom font identifier at the beginning.

font-family: Chunkfive, Georgia, Palatino, Times New Roman, serif;

It’s important to set up these fallbacks in case the custom font doesn’t work for some reason.

Make sure to test your design in at least one of your fallback fonts to ensure that it doesn’t cause your layout to break.

Depending on your browser, this should give you a page with a working custom font.

The text should load immediately, is fully selectable and should work with copy/paste computing functions (a limitation of of other font replacement techniques).

screenshotA screenshot of using Chunkfive on a block of HTML text.

Cross-Browser Compatibility

It would be nice if using custom fonts online were that easy, but it isn’t.

Of course, we can’t possibly expect all the browsers to play nice and agree on a given solution! That would just be unreasonable.

Instead, all the major browsers have decided to go their own way with font formats that they choose to support[1].

Further, mobile browsers like Safari on the iPad and iPhone require SVG.

Confused yet? You should be. Fortunately, there are brilliant developers that have worked this all out for you by developing simple systems to follow.

The most popular method of utilizing @font-face across multiple browsers seems to be Paul Irish’s Bulletproof @font-face syntax.

Using Irish’s method, you include multiple versions of the font so that it works on all browsers.

In addition, the code contains a little trick that ignores locally-installed fonts with the same name. Though it is much faster to load a local font, it’s been largely agreed upon that doing so can often have messy results[2].

Let’s take a look at the Bulletproof Syntax using Chunkfive:

@font-face {
	font-family: 'ChunkFiveRegular;
	src: url('Chunkfive-webfont.eot);
	src: local(‚ò∫'), 
			 url('Chunkfive-webfont.woff') format('woff'), 
			 url('Chunkfive-webfont.ttf') format('truetype'), 
			 url('Chunkfive-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;

As before, we first declare an identifier for the rest of our code.

Next, we refer to the EOT version of the font for IE. If the browser is not IE, it will ignore this and move down the line until it finds a font type it can actually use.

The src:local bit is the local font trick I mentioned above. It essentially tells the browser to use a fictional font name that won’t be present on your machine so there is no mess from the wrong font being displayed.

Finally, setting the font-weight and font-style to normal here will ensure that all browsers default to the same values. This makes it so that you can apply a faux bold or italic style later in the CSS. Without this snippet, Webkit browsers will ignore any weight or style commands.

Keep in mind that font rendering can vary widely across browsers and operating systems. Many developers have experienced such poor results from Windows and Internet Explorer that they avoid using custom fonts altogether. Always be sure to examine your results closely on all the browsers that you can to decide if the quality is acceptable.

Where Do I Get All Those Font Types?

You’ve probably noticed that the method above requires you to have at least four different versions of every custom font that you use. Many font sources, such as Fontex, will frequently only provide one file type in a download. So what do you do when you only have a single font file?

Font Squirrel

The answer is to add Font Squirrel to your list of new favorite sites. Font Squirrel offers tons of free @font-face kits that are essentially a one-click download for everything you need to get going with custom, cross-browser compatible fonts.

Each kit includes all the font types you need as well as demo HTML and CSS files to get you started.

All you need to do is download the kit, grab the font files and CSS snippet, and you’re ready to go! The CSS used by Font Squirrel is based on Paul Irish’s bulletproof @font-face syntax shown above so you can be confident that it’s the best method currently available for ensuring compliance for as many users as possible.

@font-face Kit Generator

What if FontSquirrel doesn’t have the kit you need? No problem. If you have a font that you obtained from another source, simply stop by the Font Squirrel @font-face kit generator. All you do is upload your font file and this amazing tool will automatically convert it to all the necessary file types and generate a kit for you to download.

Note that using the @font-face Kit Generator means that you’re guaranteeing that you have the rights/license to convert and embed the font files you upload to the site.

This service is completely free and you can use it with zero sign up.


Popular @font-face Services

As I mentioned at the beginning of this article, several services have popped up offering both free and premium solutions for simplifying the @font-face process.

Below is a list of some of the most popular services currently available.

Google Font API


The Google Font API is one of the easiest and newest solutions for inserting custom fonts into your designs.

Using this API, you simply choose a font from the Google Font Directory and grab a snippet of code to insert into the <head> tag of your HTML documents. Afterwards, you can refer to the font in your CSS just like any other font you use normally, no @font-face CSS required (it takes care of all this behind the scenes).

All of the fonts in the Google Font Directory are free and open-source. The downside is that there are currently less than twenty options available. The Google Fonts API also neglects to include an SVG version so there is currently no support for mobile devices.

Read the Six Revisions guide on using Google Font API.



TypeKit was one of the first services to launch dedicated to making @font-face easier to implement. The TypeKit team has partnered up with font foundries from all over the world to provide hundreds of excellent fonts with zero licensing complications for as long as you use the service.

There is a free trial plan that allows you to use a limited number of fonts on a single website.

Paid plans range from $24.99 per year for two sites all the way to $99.99 per year for an unlimited number of sites.



Typotheque allows you to purchase any of their fonts for web use. The nice thing about this service is that instead of a yearly plan, there’s only a one-time fee for purchasing the font. Once you purchase the font you want, just copy and paste the provided CSS and you’re done!

Fonts Live


Fonts Live is yet another service that takes care of the complicated licensing hassles while bringing you hundreds of high-quality fonts from the best designers and foundries.

With Fonts Live, you purchase each font individually and pay a yearly subscription fee for the use of the font. Once you purchase the font, you are provided with the simple code snippets necessary to embed the fonts into your site.



The Kernest system is nearly identical to that of the Google Font API. Simply find a font you like, grab the link to embed into the <head> tag of your HTML documents and you’re all set to start using the font in your CSS.

Kernest has lots of both free and premium fonts available. Unfortunately, the browsing system on attempts to load lots of these fonts simultaneously and can therefore be painfully slow and difficult to use. Prepare for a browser crash if you stumble onto a page with too many font previews.

Wrapping Up @font-face

You should now be fully armed to begin using beautiful custom fonts in your web designs. Using just a few lines of CSS and a free web service (or host your own files as outlined above), you can generate your own @font-face kits that work on most major browsers and won’t cost you a dime to implement.

If the free solutions don’t provide enough options and thinking about font licensing gives you a headache, check out the services above that take care of the complicated legal stuff, and even most of the code, making it extremely simple for you to use premium fonts online.


  1. How to Achieve Cross-Browser @font-face Support
  2. @font-face gotchas

Related Content

About the Author

Joshua Johnson is a Graphic Designer/Web Designer with over six years of experience working with a major international marketing agency. He is also the Editor of Design Shack, a web design and development blog. Check out his recent work and follow him on Twitter: @secondfret.

This was published on Jun 8, 2010


Melody Jun 08 2010

Cool. Hadn’t realized the different services out there for this. Any particular one a favorite/you frequently use?

Ethan Dunham Jun 08 2010

Joshua- Thanks for the writeup of our services. You may not know about our other font site called Fontspring that has over 1000 font families licensed for @font-face. Unlike Typekit and others, Fontspring is not a hosted service, but offers webfonts as a download, that users can install themselves. It is unmetered, and most are licensed for unlimited domains. Anyway, thanks!

MarkT Jun 08 2010

Marvellous marvellous marvellous! :o)
Thanks Joshua, this is such a helpful contribution to boost people’s options when thinking about fonts in their websites.

very informative tutorial, thank you for publishing

Jay Philips Jun 08 2010

Nice tips, I’ll definitely be adding Font Squirrel to my bookmarks,

Really nice article … and I don’t say that often

Kolin Jun 08 2010 is another good service.

Jordan Walker Jun 08 2010

Great article that surmises font face.

Tanya Jun 08 2010

You explained it really well. Thnx Johnson for sharing this

Metin Jun 08 2010

Awesome article! Knew @font-face but never used it before. From now on, I’ll definitely consider it as an alternative for prospective projects.
btw, @font-face Kit Generator service is great!


Young Jun 08 2010

man, this is one of the most useful posts i’ve seen on SR in a while! cheers sir.

Jason Gross Jun 08 2010

Awesome article and a great way to introduce people to the idea of @font-face. It’s really not all that scary of a thing and with all of these great resources you have made it a viable option to projects without adding hours of work. Great stuff!

Young Jun 08 2010

hmm to my dismay the files i created through fontsquirrel don’t seem to be working with korean fonts…

does anyone know what the problem might be? i googled for a while but haven’t found anything.

i’m just running it on my local machine with xampp.

cool! You read my mind. I’m looking for this a moment ago, and looking at SixRevisions bookmark, I found the answer. Thank you mate.
Btw that kit generator is awesome. Thank you for this kind of people who do this for free.

Thanks for info.

Here’s my feedback:

I used Font Squirrel and downloaded the BergamoStd font because it has regular, bold, italics.
I noticed it comes with a css stylesheet, which makes it a lot easier.
All I have to do is copy and paste it and change the url because I used a fonts folder.

Here’s the problem.
I pasted the code in my css file.
I used Dreamweaver CS4 for this and it gave me an error saying:
The document’s current encoding can not correctly save all of the characters within the document. You may want to change to UTF-8 or an encoding that supports the special characters in this document.

I’m not sure but src: local(‚ò∫’) is probably giving me this error.

Any advice?

timholmesdesign Jun 08 2010

Getting my hands on all the font types was the main stumbling block for me and as such I have tried using SiFR, Cufon and TypeKit, the @font-face kits at Squirrel will certainly help me to do so much more, great article.

My future web design projects will definetly benefit.


Tim Holmes

Young Jun 08 2010

My failure to look as far into it as possible strikes again…

Ethan at FontSquirrel helped me figure out the Unicode fonts with it – it’s under custom subsetting, and although CJK aren’t offered as presets, you can look up the unicode ranges on and specify them.

I had to make sure to go back and add the Latin letters on top of the Korean subsets added. The onchange script on the subset preview can take a long time to load, but after some patient waiting, I have @font-face working on my Korean fonts :)

No more FLIR for me.

ddeja Jun 08 2010

With this kind of tools, people will start making amazing sites using just a typography, nothing else:) On the other hand I’m still a big FAN of the hand made graphics more than beautiful fonts. Great article. Thanks.

Satya Prakash Jun 08 2010

See if you like this Font preview application:

haroldblackorby Jun 08 2010

The local value is indeed a non-ASCII (UTF-8) value and that’s why you’re getting the encoding warning. I’m not sure about Dreamweaver, but in other HTML editors, there is sometimes an option to Save with Encoding or an option to set Unicode settings for the file. You need to save your CSS file in UTF-8 format (Unicode). I would guess it’s saving it in it’s original format in ASCII.

In Dreamweaver CS4, it saves it automatically in the right format for me, so I gon’t get your error. You could try upgrading if you are using an older Dreamweaver version.

Finally, you could use the exact CSS file from Front Squirrel as just a separate include rather than trying to paste it into your old CSS file. I like to keep my @font-face rules in a separate file from the rest of my CSS.

If Dream

Thanks for the great article Joshua.

Extensis is also developing a web font service to provide high quality typography for web design. Check it out at:

Thanks for the great article Joshua. Also worth considering is the new web font service from Extensis called WebINK.

Matthew Heidenreich Jun 08 2010

Really informative article. Thanks for the guide. Always love learning new tricks.

Paul Irish Jun 08 2010

Kris, If you continue to get problems you can drop this into your css file.

@charset “UTF-8”;

Kaushik Jun 09 2010

Any particular reasons I should use the services mentioned? Can’t I use any font downloaded from say

David Wheatley Jun 09 2010

Whilst freelancing i have used @font-face on a few projects, i was really impressed with how easy and simple it is to implement. I have also used Typekit which was very easy to use, but working on smaller budget projects i just don’t have the cash to afford the subscription.

Interesting article – thanks for posting.

Seth Warburton Jun 09 2010

Nice post, but bad timing.

Font-Face just announced that they are shutting up shop:

Seth Warburton Jun 09 2010

Nice post, bad timing.

Font-face just announced that they are shutting up shop:

Jacob Gube Jun 09 2010

@Kaushik: Just be aware of licensing issues. Some fonts may be free, but the tricky issue is that you’re actually using their font files (the .ttf file, for example) and there’s a gray area where some fonts don’t allow you to distribute them, and using @font-face is sort of like distributing their files.

The fonts that aren’t going to give you a lot of trouble in terms of licensing are open source (e.g. MIT-style or a font-specific open source license like SIL open font license). That is why Google Fonts API just distributes open source fonts; otherwise, they’d feature every single free font out there.

In short, nothing is stopping you from using any font from, but @font-face brings out this licensing uncertainty that, at least to my knowledge, has no apples-to-apples precedence.

If you want to download fonts for @font-face use, one place I recommend is from Google Font Directory because they’ve checked to make sure that these fonts are OK for @font-face.

Monie Jun 09 2010

I never been sue b4, hopefully will not be!
Just wondering how serious the situation will be if we got caught in “sort of like distributing their files” in our website?

Ted Goas Jun 09 2010

I’d like to see a follow up or footnote about @font-face and website performance. The “Bulletproof Syntax” code calls four font files… and not all font files are small.

Bulletproof maybe, but at what cost? Everyone sees the same CSS and download all four linked files, but each browser only uses one of these files. Three wasteful server calls / downloads. There has to be a better way.

Souders, Stoyan, and Paul Irish have written some great things about @font-face and performance

@TedGoas Yes website performance can be a concern if you are adding a ton of full-size fonts to your website. Hosting services allow you to subset your font file so that you only include the required glyphs. For example, in WebINK, you can choose what character set is required – from only the English character set, Western European character set, or even the full font face if you need everything. It all depends upon your project.

I’m sticking with cufon for the time being. It’s usually lighter weight, and most fonts look gorgeous rendered by cufon – on any platform. Can’t say the same thing about @font-face. In fact, most of the time it looks pretty bad on Windows.

Aisha Jun 10 2010

Great stuff guys! I really don’t know how much time it takes for your guys to compile such a list of excellent resources but it takes a lot of time for me to digest it all! Keep up the good work! Thank you!

Animas Jun 10 2010

Great stuff guys! I really don’t know how much time it takes for your guys to compile such a list of excellent resources but it takes a lot of time for me to digest it all! Keep up the good work! Thank you!

Follow-up after feedback:

@haroldblackorby @Paul Irish
Adding @charset “UTF-8″; in CSS didn’t do it. I had to take the CSS file.
I guess I will have to upgrade my dreamweaver because the file is unicode and it didn’t work.
So now it works, but …

I had to place my fonts in my root folder. I even uploaded the site on a server, just to make sure it wasn’t dreamweaver that made me to this.
Having all those fonts in the root folder is a bit of a bummer.
(I tried it with 2 fonts, just to make sure)

@Joshua , yes, like this : url(Fonts/’Chunkfive.otf’)

Louise Jun 11 2010

Very helpful and useful article, I will more than likely consider trying @font-face for my future projects.

Follow-up after feedback part 2 :

It has to be between ‘ ‘ , you may want to adjust this in the blogpost (?)
src: url(‘fonts/Sansation_Regular-webfont.eot’);
src: local(‘☺’), url(‘fonts/Sansation_Regular-webfont.woff’)
That makes it work.

However, it won’t work when when there’s a forward slash right before the fonts (‘/fonts/Sansation_Regular-webfont.eot’)
And strangely enough I only succeeded in making it work for the homepage. The other pages are one or two levels down.

Having the fonts in the root folder seems like the best way to go.

Levinson and Axelrod Jun 11 2010

Thanks for the explanation. @font-face seems like a great resource to consider for future projects.

I used the bulletproof code last time i needed to use font-face, recommended! Thanks for the other tips, some avenues to explore

Anything Graphic Jun 13 2010

Wow, very in-depth article. I love it! I was researching this as I want to start implimenting some CSS3 in my new website redesign… Stupid IE :-( Making me rethink about the whole FontFace thing. I’ll have to still give it a try though. Thanks!

Adrian Jun 17 2010

Another great article. I’ve been using cufon a wee bit lately as it’s quite easy to set up. The big drawback of cufon, I feel, is that you can’t select the text.

If this allows you to select text, then I think I may have to give it a go.

thanks :)

Kishore Mylavarapu Jun 21 2010

One of the best posts … great way of writing.really clean.Thank you so much.

Gopal Jun 23 2010

It’s not working in FF-3 any alternative to make it compatible with FF-3 ?

SJL Web Design Jun 30 2010

Great post, @font-face is really useful!!

Thanks for sharing.

Vincent Jul 07 2010

Have you ever considered taking your font and base 64 encoding it, then grabbing it from a data uri instead of linking via all the various file formats?

so for example

@font-face {
font-family: ‘CloisterBlackLight’;
src: url(‘CloisterBlack-webfont.eot’);
src: local(‘☺’), url(“data:font/opentype;base64,*insert data code here without stars*”);

It seems to work really well for me in tests on Non-IE based browsers, and also avoids the whole flash of un-styled content issue that plagues current implementations.

Stucky Jul 26 2010

How cool can Paul Irish be? Thank you! Stucky

Paul Dukes Aug 29 2010

I’ve been using the Google API, mostly because, like you said, it’s very easy to implement and also because I hadn’t bothered looking to deep into @font-face.

After reading you article and seeing how simple it actually is to use your own fonts I can’t really see a reason not to. So unless Google API starts to expand it’s number of available fonts, then it’s days are number, in my designs anyway.

Thanks Mate, that was a very well written article

nice article. very good article…thanks a lot.

I just used @font-face for the first time and I really like the way it works but it keeps reloading on every page of my site. Is there any way to make it load the fonts once and use them throughout the site?

Evan Skuthorpe Oct 25 2010

this is awesome, exactly what ive been looking for for some time. cheers.

Josef Oct 26 2010

I’ve applied @font-face according to this excellent article. It works OK on the homepage ONLY!!
On the other pages it does not show the @font-face font.
Does anybody have a solution?

Thank you for this excellent article! Exactly what I was looking for. Other sites that describe @font-face haven’t taken the time to identify all the details that you have layed out! Great article.

Albert P. Dec 01 2010

Excellent article, thank you! – Just wanted to comment that i find the pricing models based on bandwidth is a total crap! Imagine a licence for a font for printing, and the prize depends on what the circulation is going to be (e.g. a standard printing licence limiting the usage to 1000 copies per month)…

ishelomi Dec 14 2010

I read your article about the options to convert ttf to eot, and like to use the ttf2eot tool.
I am trying as so far no luck.

I downloaded the ttf2eot tool, and got a folder with:

I have FontForge and x11 installed, on my Mac OS X 10.4.x. MacBookPro. Also have MacPorts installed

Can you please help using this script, I am a graphic designer not a programmer. A step by step ‘lead by the nose’ will be appreciated.

Thomas Jan 04 2011

Great post. You just help out our developer.

Really Nice , Thank You :)

Chris Boggs Feb 07 2011

Thanks for simplifying this mess! Wasn’t as bad as I thought after all. Thanks again! -c-

Marco Mosetti Feb 10 2011

I used Google Fonts many time, but I didn’t know it was so easy to expand it to any other free font. Nice tutorial for the typography lovers!

Thanks a lot for clarifying a lot of things re @fontface. Used to have such a hard time installing custom or specific fonts to websites I was building. This seems a lot more simpler and straightforward.

Why to NOT give a working example with HTML included. CSS with with out HTML is like peanut-butter NO jelly. This TUT is a dud and its done better @ other places on the net.

Power ixir Feb 17 2011

Thanks a lot for clarifying a lot of things re @fontface. Used to have such a hard time installing custom or specific fonts to websites I was building. This seems a lot more simpler and straightforward.

Pushpinder Bagga Feb 17 2011

I could not find if its supported in IE6… could you please mention which IE does it suit… thanks!

AceeBaba Feb 23 2011

Wonderful Joshua Johnson,
I have tested it really works even in IE5 too :). Great article i hope after using this way we don’t need to use Cufon or sIFR for font Replacement. I also found the same article in short war at

Vekta Feb 28 2011

A very comprehensive list of resources, Thanks for sharing Joshua.

Marvin Herrera Mar 01 2011

Amazing post! Thank you so much!

Monique Mar 23 2011

There has been a recent (March 2nd) update on the Bulletproof Syntax:

@font-face {
font-family: ‘fishyfont’;
src: url(‘fishyfont.eot’); /* IE9 Compat Modes */
src: url(‘fishyfont.eot?iefix’) format(‘eot’), /* IE6-IE8 */
url(‘fishyfont.woff’) format(‘woff’), /* Modern Browsers */
url(‘fishyfont.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘fishyfont.svg#svgFontName’) format(‘svg’); /* Legacy iOS */


sponiza Apr 01 2011

Exactly what I need for the online labelprinting service I am developing. Really great that I am able to offer customers different fonts for their labels.

When I am done, I will post the link!

Ed Parton Apr 16 2011

I don’t know how anybody got this thing to work??

I just spent several hours and finally located the problem.

font-family: ‘ChunkFiveRegular;
src: url(‘Chunkfive-webfont.eot);

the above sample code that is posted in the original text is wrong… it should be

font-family: ‘ChunkFiveRegular’;
src: url(‘Chunkfive-webfont.eot’);

I had to put in the ending ” tick ” marks to get this to work…

hope this helps…

1 year after its written, this article still remains a ray of hope for many coders like me who struggle with custom fonts for webpages. Kudos to you.

Aldous Pagadu May 05 2011

Can anyone help me?
I already spent more than two hours in this and I can’t get it to work.

Here, take a look at my work:

If ever, please send a reply at my email here:
[email removed]

I really need this.

Thank you for the wonderful article. I tried fontface in one of my Joomla site. I applied it to the first-letter. Everything looks fine with Chrome, FF and IE9. The only problem I am having right now is some glitch with IE8. The font is missing part of it, but appears fine while scrolled to certain position. Here is my site
and following is the code:
@font-face {
font-family: ‘MutluOrnamental’;
src: url(‘’);
src: url(‘’) format(‘eot’),
url(‘’) format(‘woff’),
url(‘’) format(‘truetype’),
url(‘’) format(‘svg’);
font-weight: normal;
font-style: normal;


Any help will be greatly appreciated.

Memory Imprint Studio

Bobbi Jo Woods May 25 2011

Hi Tony,

I think the problem resides in your use of slanted single quote marks (’) as opposed to regular single quote marks (‘). Try replacing all the code you placed about, with the straight ones (‘) using a text editor, or Dreamweaver with the Code View on.

Hope that helps!

Greg Bowen May 30 2011

Works great, thx! Where does this come from though?: ‘local(‚ò∫’)’?

I understand local, but as to what goes in the parentheses, I can not find any info for that on the web?

Marc-André Jun 23 2011

The “local(‚ò∫’)” is a hack for the cross-browser. IE don’t read the code below this.

this is probably a really stupid question…but how do i use the fonts? you say: “When you want to use that font anywhere in your site, simply build a font stack like you would normally, using your custom font identifier at the beginning.”

but i don’t know what that means…i’ve done everything else, its just that one step that i don’t know what you mean?

i’m building my site with artisteer and wordpress and i would really love to be able to use this font i bought for the header, also in the menu bar. maybe in the headers of the posts and pages as well…but i don’t know how to do this. help?

OH! do you mean to add the font name to the style sheet where it says font-family (at the points i would want to use this particular font)? if so, its not working for me…but i wonder if i put the CSS code in the right place…

i got this code from font squirrel: @font-face {
font-family: ‘ZombieRegular’;
src: url(‘zombiere-webfont.eot’);
src: url(‘zombiere-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘zombiere-webfont.woff’) format(‘woff’),
url(‘zombiere-webfont.ttf’) format(‘truetype’),
url(‘zombiere-webfont.svg#ZombieRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;

and i just stuck it at the end of my theme’s stylesheet…but i don’t know if i just put it in the wrong place?

Thank you for the wonderful article. I tried fontface in one of my wordpress sites. Everything looks fine with Safari, Chrome, FF and IE9. The only problem I am having right now is with IE8. Here is my site
and following is the code:
@font-face {
font-family: ‘Nadav’;
src: url(‘’); /* IE9 Compat Modes */
src: url(‘’) format(‘eot’), /* IE6-IE8 */
url(‘’) format(‘woff’), /* Modern Browsers */
url(‘’) format(‘truetype’), /* Safari, Android, iOS */
url(‘’) format(‘svg’); /* Legacy iOS */

Any help will be greatly appreciated.


i’ve had a hard time making this work. at first it seemed to only work if the fonts are in the same folder as the html file. i like putting my stuff on separate folders though and url(‘fonts/thisfont.ttf’) didn’t work for me. however, url(‘../fonts/thisfont.ttf’) worked!

thanks for this awesome article!

I think chrome already supports .otf type. Doesn’t it? Actually it works for me:) Thanks for the article, much appreciated!

so what are the browsers that don’t support @font-face?

pethr Jul 27 2011

Nice article but it should be written there in big bold letters (it is there but not big and bold enough) that web fonts rendering is a mess on most versions of Windows and looks accordingly. Just when you thought you could hack all the IE versions to work, you find out you can’t really render custom fonts properly on most win machines (regardless of the browser). It’s really like getting screwed by Microsoft over and over again.

Use Adobe BrowserLab to see how awful it looks on Windows (especially in Chrome closely followed by Firefox and some versions of IE).

saroz Jul 29 2011

Hey thanx

Richard Hill Aug 06 2011

@fontface is useful but needs to be used sparingly. Great for heads and subheads.

I did everything to make the above example work and it just didn’t. Font (OTF) folder in root directory, check.. @fontface rule in stylesheet, check.. try the identifier out on stylesheet, no luck :( I tried the Chunkfive example and I know the browser I’m using should work (Firefox). What could I be doing wrong?

Adam Haworth Sep 02 2011

I have got font-face to work on my homepage but it doesn’t want to work on any other page?

I can’t get my head around this.

ADMiN Sep 03 2011

This was perfect!

Thank you so much!


Tamás Sep 06 2011

Thanks a lot! It is really useful for me…
As I am Hungarian, I would need fonts with special Hungarian characters: őŐűŰ (o and u with double accent)
I am ready to do it myself…
How could I add these characters to the Fonts I download?
I am using Ubuntu, and tried FontForge… without succes…

Thanks a lot!


Thanks for the guide its helped so much!! I don’t know what I would do with out fontface

Thank you !

I’m relatively new to web development, and I’m doing it in my spare time.

Fonts are my biggest weakness at the moment and I think you’ve just helped me get over that hurdle.



Brian Sep 26 2011

These fonts can really make a difference when it comes to making sales on your website. A bit of time to implement this sets you apart from the competitors!

Been looking all day for a good clear article on @font-face implementation. This was really helpful — thank you!

Thanks for putting this together, been looking for one unified page on @font-face and I’ve found it.

Straight to the bookmarks!

@ Pethr – Not strictly true, Font-Face rendering is supported in IE6, 7, 8 & 9.

The problem with ugly font rendering you are experiencing is when a windows user DECIDES to turn off ClearType font rendering. This isn’t font-face’s problem, this is their choice to have ugly fonts.

Billie Nov 17 2011

Thanks for a great article on font face – we are overhauling our site and are bored with the “stock” fonts that come with most themes.

Can’t wait to play…

Richindesign Nov 25 2011

yea its best to set a nice font for ie its a shame they arent more involde with cool CSS, great article, added the site to my bookmarks, as a web designer its nice to have useful resourses

mrs. font Dec 10 2011

I am currently designing my own website, and I need great ideas to make it look fabulous. This post is very timely because of the great pieces of advice on fonts and similar topics. From the looks of it, many other viewers have found your post very enriching.. And I am one of those.

Great job, and keep posting informative blogs! :)

This comment section is closed. Please contact us if you have important new information about this post.