The Essential Guide to @font-face

Jun 8 2010 by Joshua Johnson | 98 Comments

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].

  • Internet Explorer only supports EOT
  • Mozilla browsers support OTF and TTF
  • Safari and Opera support OTF, TTF and SVG
  • Chrome supports TTF and SVG.

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.

screenshot

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

screenshot

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

screenshot

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

screenshot

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

screenshot

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.

Kernest

screenshot

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 Kernest.com 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.

References

  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.

98 Comments

Melody

June 8th, 2010

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

Ethan Dunham

June 8th, 2010

Joshua- Thanks for the writeup of our services. You may not know about our other font site called Fontspring http://www.fontspring.com 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

June 8th, 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.

mrpc

June 8th, 2010

very informative tutorial, thank you for publishing

Jay Philips

June 8th, 2010

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

Nox

June 8th, 2010

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

Jordan Walker

June 8th, 2010

Great article that surmises font face.

Tanya

June 8th, 2010

You explained it really well. Thnx Johnson for sharing this

Metin

June 8th, 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!

Thanks.

Young

June 8th, 2010

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

Jason Gross

June 8th, 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

June 8th, 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.

aki

June 8th, 2010

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.

kris

June 8th, 2010

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

June 8th, 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.

Cheers

Tim Holmes

Young

June 8th, 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 http://www.unicode.org/charts/ 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

June 8th, 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.

haroldblackorby

June 8th, 2010

Kris,
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

Jim

June 8th, 2010

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: http://www.webink.com

Jim

June 8th, 2010

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

Matthew Heidenreich

June 8th, 2010

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

Paul Irish

June 8th, 2010

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

@charset “UTF-8″;

Kaushik

June 9th, 2010

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

David Wheatley

June 9th, 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

June 9th, 2010

Nice post, but bad timing.

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

http://www.font-face.com/#google_announcement

Seth Warburton

June 9th, 2010

Nice post, bad timing.

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

http://www.font-face.com/#google_announcement

Jacob Gube

June 9th, 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 dafont.com, 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. http://code.google.com/webfonts

Monie

June 9th, 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

June 9th, 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

Jim

June 9th, 2010

@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.

Matt

June 9th, 2010

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

June 10th, 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

June 10th, 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!

kris

June 10th, 2010

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

June 11th, 2010

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

kris

June 11th, 2010

Follow-up after feedback part 2 :

@Joshua
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

June 11th, 2010

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

Kent

June 11th, 2010

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

June 13th, 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

June 17th, 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

June 21st, 2010

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

Gopal

June 23rd, 2010

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

SJL Web Design

June 30th, 2010

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

Thanks for sharing.

Vincent

July 7th, 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

July 26th, 2010

How cool can Paul Irish be? Thank you! Stucky

Paul Dukes

August 29th, 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.

Macc

September 20th, 2010

Thanks Mate, that was a very well written article

Alex

September 25th, 2010

nice article. very good article…thanks a lot.

Mike

September 30th, 2010

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

October 25th, 2010

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

Josef

October 26th, 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?
See http://test.jpretired.cz/
Thanks.

Ben

November 10th, 2010

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.

December 1st, 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

December 14th, 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:
OpenTypeUtilities.cpp
OpenTypeUtilities.h
ttf2eot.cpp
Etc.

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

January 4th, 2011

Great post. You just help out our developer.

SiNA

January 28th, 2011

Really Nice , Thank You :)

Chris Boggs

February 7th, 2011

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

Marco Mosetti

February 10th, 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!

sas

February 15th, 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.

Zer0

February 15th, 2011

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

February 17th, 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

February 17th, 2011

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

AceeBaba

February 23rd, 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
http://www.960development.com/how-to-write-cross-browser-font-face-syntax/

Vekta

February 28th, 2011

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

Marvin Herrera

March 1st, 2011

Amazing post! Thank you so much!

Monique

March 23rd, 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 */
}

Source: http://readableweb.com/new-font-face-syntax-simpler-easier/

sponiza

April 1st, 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

April 16th, 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…

Ejaz

May 3rd, 2011

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 5th, 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:
http://www.mediafire.com/?ahd4uriu4oogins

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

I really need this.

Tony

May 15th, 2011

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 http://www.memoryimprinstudio.com
and following is the code:
@font-face {
font-family: ‘MutluOrnamental’;
src: url(‘http://www.memoryimprintstudio.com/fonts/Mutlu__Ornamental-webfont.eot’);
src: url(‘http://www.memoryimprintstudio.com/fonts/Mutlu__Ornamental-webfont.eot?#iefix’) format(‘eot’),
url(‘http://www.memoryimprintstudio.com/fonts/Mutlu__Ornamental-webfont.woff’) format(‘woff’),
url(‘http://www.memoryimprintstudio.com/fonts/Mutlu__Ornamental-webfont.ttf’) format(‘truetype’),
url(‘http://www.memoryimprintstudio.com/fonts/Mutlu__Ornamental-webfont.svg#MutluOrnamental’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

Any help will be greatly appreciated.

Tony
—————————
Memory Imprint Studio

Bobbi Jo Woods

May 25th, 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 30th, 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é

June 23rd, 2011

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

Tina

June 26th, 2011

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?

Tina

June 26th, 2011

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?

Oren

June 27th, 2011

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 http://kidumi.com/dorivry.co.il/projects/
and following is the code:
@font-face {
font-family: ‘Nadav’;
src: url(‘http://kidumi.com/dorivry.co.il/nadav-light-webfont.eot’); /* IE9 Compat Modes */
src: url(‘http://kidumi.com/dorivry.co.il/nadav-light-webfont.eot?iefix’) format(‘eot’), /* IE6-IE8 */
url(‘http://kidumi.com/dorivry.co.il/nadav-light-webfont.woff’) format(‘woff’), /* Modern Browsers */
url(‘http://kidumi.com/dorivry.co.il/nadav-light-webfont.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘http://kidumi.com/dorivry.co.il/nadav-light-webfont.svg#svgFontName’) format(‘svg’); /* Legacy iOS */
}

Any help will be greatly appreciated.

oren

Marc

July 9th, 2011

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!

dori

July 21st, 2011

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

Tong

July 26th, 2011

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

pethr

July 27th, 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).

Richard Hill

August 6th, 2011

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

Jess

August 23rd, 2011

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

September 2nd, 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

September 3rd, 2011

This was perfect!

Thank you so much!

^_^

Tamás

September 6th, 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!

Greetings
Tamas

Adam

September 14th, 2011

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

Kyle

September 22nd, 2011

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.

Cheers

Kyle

Brian

September 26th, 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!

Jess

October 1st, 2011

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

Jack

October 6th, 2011

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

Straight to the bookmarks!

Rory

October 31st, 2011

@ 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

November 17th, 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

November 25th, 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

December 10th, 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! :)

Leave a Comment

Subscribe to the comments on this article.