November 4, 2009

@font-face Generator Expectations

Hint: Keep Them Low

the elephant in the room

We are all very excited to finally see browsers support some form of font embedding. Hurray you get to use any font you want now. While we were all celebrating that fact, the elephant in the room started trumpeting...

That elephant is named Windows. Here’s the short of it: Windows browsers do not render type well unless you have a perfectly hinted TrueType font. OpenType (OTF) fonts don't rendered well, unhinted TrueType don't render well, and even "auto-hinted" TrueType don't render well. Update: I changed my mind. The Font-Face Generator does a pretty good job of auto-hinting. Try it out and see.

Many Font Squirrel users have become frustrated that their OTF files that are being run through the Generator come out looking like a pixelated mess. Particularly bad are fonts that are light and thin.

So what should you do about it? My recommendation is to:

  1. Stick with the standard font stack for body copy until Microsoft can deliver a better rasterizer to most of your users.
  2. Use custom @font-face fonts for headlines and other "big" type. The bigger the type, the less noticeable the rendering.
  3. Always start with a TrueType font if you can help it.

You will be disappointed by most of the converted @font-face fonts you see in Internet Explorer and Firefox for Windows. And we don't think it is our fault. Just look at how nice a Mac renders! Again, I changed my mind. The type coming out of our Generator is looking pretty good now!

Comments

Ruana

Hi, thank's a lot for your font-face-kits. This - and Paul's "bulletproof" Font Face implementation method will be extremely useful for my next webprojects.
Unfortunately I encountered a problem with at least one of the fonts. The eot-file is missing and I also couldn't generate it by uploading the ttf-file and using your generator. Is there anything I can do? Except installing WEFT on my PC - :-(( ?
November 7, 2009 at 03:44 AM
Charles Roper

Yep, in the vast majority of cases, @font-face text looks like utter pony on Windows. The current excitement and possibilities being generated by a workable @font-face is seriously stunted by current ClearType rendering. We need browser makers to start supporting DirectWrite on Windows; only this will bring quality font anti-aliasing to the majority of internet users. Microsoft have done their bit - they've provided the API (late in the day, as usual; but hey, it's Microsoft, what do you expect?) - let's start putting some pressure on the browser makers to do their bit and implement it.
November 7, 2009 at 06:00 PM
Ethan Dunham

@Ruana - This should not be happening. I'm guessing you have a bad font. Send the font to me: ethan at fontsquirrel.com and I'll take a look.

@Charles - I agree. DirectWrite seems to be the last domino that needs to fall to get all this going. I'm actively working to get better rendered fonts out of the Generator, but haven't gotten there yet.
November 7, 2009 at 09:48 PM
Charles Roper

Just found an interesting article re. DirectWrite that demonstrates the advantages quite nicely:

http://www.basschouten.com/blog1.php/2009/10/27/font-rendering-gdi-versus-directwrite

What is *particularly* interesting is this quote: "I've been working for Mozilla on implementing DirectWrite as a Cairo and gfxFont backend."

Sweet!
November 10, 2009 at 02:53 AM
Charles Roper

Sorry to spam, but here's another relevant article:

http://blog.mozilla.com/nattokirai/2009/10/22/better-postscript-cff-font-rendering-with-directwrite/

DirectWrite rendered Calluna looks *gorgeous*.
November 10, 2009 at 03:06 AM
xants

Hi! Can you tell me, how can i find fonts for font-face embedding with CE characters? Thank you! xants
November 18, 2009 at 02:14 PM
Ethan Dunham

@xants - I realize the need to see what characters a font has on our site. We hope to address that soon.
November 19, 2009 at 09:50 AM
murraybiscuit

just wanted to commend you guys on a great site. generally with emergent technologies, mass adoption only occurs later on because it's not packaged nicely for users up front. but you have managed to put it together in an accessible way, so hopefully designers and developers will pick it up and run.

i'm very excited about embedded fonts and i'll drop a mail to a few of my friends. unfortunately most people i know don't know about sifr. this could be a long road :)

btw, chrome is rendering the fonts nicely for me on windows. even ie6 is looking okayish. but ff3.6 isn't antialiasing.
November 27, 2009 at 06:42 AM
murraybiscuit

btw, is there a way of rendering without anti-aliasing? e.g. with pixel fonts...
November 27, 2009 at 06:45 AM
Ethan Dunham

Thanks Murray. Haven't tried pixel fonts yet. Doesn't sound like a good match for @font-face. Will look into Firefox 3.6 rendering though.
December 1, 2009 at 01:51 PM
Nikola

I'm pretty much impressed with the capabilites of @font-face generator tool. Never less i'm at a loss when I try to create a cyrillic font for web. I tried almost everything that I was able to think of. The fonts have cyrillic symbols, and out of whole bunch of fonts I tried only one was able to convert so cyrillic text to appear. Is there any trick regarding this?
December 8, 2009 at 03:49 AM
Newark1

Great site guys. This is a high quality collection of fonts and I appreciate the hard work. I added a plug for your great work to my blog at http://newark1.com/blog.htm
December 11, 2009 at 04:04 AM
Nathan

I am noticing that none of the kits work in firefox 3.5 on my pc. Even the font used on this site and the examples of the kits. I was wondering if this is unique to me or if anyone else is experiencing this? BTW this is firefox 3.5/IE6 on windows XP.
January 6, 2010 at 02:58 PM
Ethan Dunham

@Nathan-
I'm running FireFox 3.5.6 on XP and the site loads @font-face fine. Not sure what might be the issue for you...
January 6, 2010 at 03:01 PM
Buck Meadows

Can you give some insight into how the EOT converter works? I've spent a good amount of time wrestling with WEFT and a couple other nonfunctional OSS EOT creators. Is your solution totally home-baked, or are you relying on another technology?
January 8, 2010 at 05:21 PM
Priscila

Oh my gosh, I jush LOVE the Font Squirrel! It's exactly was I was looking for! Congratulations + Thanks!

Just one thing, anybody knows why Netscape has no support for font-face? Does it require a special type of font? (I heard something about support for "PFR" format..) If anyone knows anything about Netscape, any links, PLEASE let me know!! I'll link to your website from mine (and to Squirrel too!)
January 17, 2010 at 07:17 AM
John

@ Nathan
"I am noticing that none of the kits work in firefox 3.5 on my pc. Even the font used on this site and the examples of the kits. I was wondering if this is unique to me or if anyone else is experiencing this? BTW this is firefox 3.5/IE6 on windows XP."

and

@ Ethan Dunham
"I'm running FireFox 3.5.6 on XP and the site loads @font-face fine. Not sure what might be the issue for you..."

First, I am the absolute zero in font embedding but have had an interest in the subject for years.

Today I sumbled on fontsquirrel and experienced the same problem as mentioned. On one PC it worked fine both with Netscape and IE. On another one it was fine with IE but not Netscape. On the third one the same as the second one. Trying the base64 encoding made it work fine with Firefox on all three but crippled IE on all three.

Found that, without base64, it only works with a Firefox version higher than 3.5.0. I don't know about versions lower that 3.5.8, apart from what Ethan says about 5.3.6, but I found that as from 5.3.8 on it is OK. This leaves us with a problem: if people don't update Firefox ...

Would it (for the time being) be a solution to include a browser detector and for earlier Firefox versions point to the base64 css? How to do that? No idea. I am also an absolute javascript zero - alas.
March 9, 2010 at 11:59 AM
John Wollring

Found the reason why the base64 css does not work with IE, thanks to Tim Brown. On the fourth line of the css there is only 'src:'. Change this into 'src: local("Alternate name"), local("Alternatename"),' and it works.
March 10, 2010 at 08:59 AM
Ethan Dunham

@john - This has been fixed in the generator.
March 10, 2010 at 04:39 PM
Lorne

I was experimenting with your @font generator and created a webkit containing just three letters. The original font was Dutch Initials as is the new limited version. It worked very well for the intended purpose of decreasing the download weight by 85%

However, it struck me afterward that there is two unintended consequences of creating webkits in this manner:
1- as the webkit is retained in the browser cache, if I later wanted to use the full font, the full downlable version will be ignored and the local version used instead with unintended consequences to the page
2 - is someone else saves the font from the download, they probably will not realized that it a crippled version of the original. This can, in time, lead to a pollution of the web will all manner of crippled fonts without anyone realizing it.

To avoid these potential problems, is it possible to modified the generator to create a webkit containing the .ttf, .eot,. woff and .svg with a new font name such as 'dutch_initials_normal_LTD.ttf' (LTD => limited) or 'dutch_initials_normal-TRUNC.ttf' (trunc => truncated)?
April 19, 2010 at 09:57 AM
Ethan Dunham

@lorne - The generator now adds the suffix -webfont to each font it creates. Thanks for the suggestion.
April 24, 2010 at 09:52 AM
Moin

Hi
Thanks for a good tool for designer specially.

i m facing i problem while using the font kit generated is while looking the site in windows 7 and linux the generated font doesn't work.

please give me an ideal if u have to fix this problem

Thanks
May 5, 2010 at 08:05 AM
m360 Graphic Design

Hey, just wanted to say great job on the generator - we previously bought a Clarendon font face license from one of the larger font foundries but actually found the (free) generator renders the font significantly better.

The type on our site - http://www.m360ltd.co.uk/ - works well in Chrome, Firefox(3.6), Safari and IE8... first gen iPhone Safari no luck but better than no display at all through Flash!

Tom
June 3, 2010 at 12:02 PM
noname

Hi, and thanks for a great generator.

I have noticed a couple of problems though. I tried converting a font with greek letters (the unicode range for html entities ω τ etc) and even though i don't use subsetting (and the glyphs are there after converting, i checked with fontforge), they don't show up with woff and eot fonts.

It seems that only the latin and latin-1 supplement planes are there (working correctly) and i can't access the glyphs in latin extended.
June 20, 2010 at 12:02 PM
Tom Elliott

Hi there, just want to say a big thanks for this great generator.. you saved me a lot of time developing web sites where I would have had to use images or Flash instead!
July 19, 2010 at 10:14 AM
Steve

I've been having similar issues as described above, with the fonts not working in IE. I checked this site (fontsquirrel.com) in Adobe Browser Lab and it, also, is not rendering the correct font faces. Has something new occurred that is preventing IE from rendering these fonts?
August 9, 2010 at 07:40 PM
Ethan Dunham

@font-face does not work in IE via Adobe Browser Lab. Test on a real Windows system and you'll see that it works fine.
August 9, 2010 at 09:22 PM
Brandon

Check out http://ipinfo.info/netrenderer/index.php to realtime previews of IE and friends.
August 19, 2010 at 02:03 AM
The Hoff

Just want to add an update - seems as though the fonts don't work on iPhone full stop. I've tested on most iPhone releases. All other browsers seem fine though :)
August 26, 2010 at 04:59 PM
Ethan Dunham

There is a bug in our demo code that is keeping the font-face preview from working right now in iOS. The kits themselves work fine.
August 26, 2010 at 05:01 PM
Chris Tarantl

I'm trying to implement the @font-face stuff on my webpage and am impressed how good it looks.

Now i stumbled over a strange issue - IE9 Beta does not show it. All the fonts on your page are correctly "replaced" but if i download a fontpack from here it does not work on my server.

Please help
September 23, 2010 at 12:35 PM
Nick N

This is great work !
I've played with @font-face using .ttf, up 'til now, only Firefox users have had the benefit of my "genius" !
Now, with your kits, I'll have cross browser support.
Brilliant !
October 29, 2010 at 06:14 AM
Ben

I too have had the issue with @font-face fonts not rendering properly in Windows. It seems the issue is with cleartype, which is enabled by default on Vista and 7. If I load a web font, it looks awfully jagged. As soon as I turn cleartype off it displays beautifully.

So far only cleartype in IE 7/8 can be turned off (via some CSS). I cannot figure out how to do this in firefox or chrome or safari.

As much as I'd love to use @font-face, I can't until a work around is found because the results in Windows Vista/7 look attrocious.
October 30, 2010 at 09:55 AM
bogieWaelah

God..
I thank you Fontsquirrel, I like the font-generator feature and the prepackaged font-face.

This is the greatest font site I ever visited. Thanks again.
November 11, 2010 at 11:26 AM
Sandra

Hi, I have problems with Cyrillic letters in some even standard fonts, the generator doesn't convert them so I have problems in paragraphs that include both Latin and Cyrillic letters.

If I use only the TTF format it's just ok (Win 7, Chrome/FF/IE), I only have this issue when converting the TTF font into the other ones through this generator.

Is there a way you could look into this problem?

Thanks in advance!
November 30, 2010 at 10:50 AM
Ali Nikooee

Hi
When I use Persian fonts, It converts them to Tahoma. Is there anyone can help me?
I think it has problem :)

Please notify me by mail for any reply ;)
ali @ namnam . ir
November 20, 2011 at 04:22 PM

Submit a Comment

Comments are closed.

Advertise on Font Squirrel!

Font Lists

Find Fonts

▼ Font Filter

▶Languages

About Font Squirrel

Font Squirrel is your best resource for FREE, hand-picked, high-quality, commercial-use fonts. Even if that means we send you elsewhere to get them... more info

 

Font Squirrel relies on advertising in order to keep bringing you great new free fonts and to keep making improvements to the web font generator. If you are seeing this message, you probably have an ad blocker turned on. Please consider disabling it to see content from our partners.

Alternatively, you can support Font Squirrel by purchasing a paid license from our sister site, Fontspring.