The Official "How to Use the Generator" Post

December 16, 2010

Generator_blobs.png

What does the Generator do?

The Generator offers web designers the ability to convert any font into easy to use @font-face webfonts. Some of you find it so easy and intuitive that it requires no explanation. Others of you need a bit more detail on the hows and whys. This post should answer most of your questions. If it doesn't leave a comment and I'll make sure it gets answered here.

Which browsers can display webfonts?

Browser TrueType WOFF EOT SVG SVGZ
IE 5-8     Yes    
IE 9 Yes* Yes Yes    
Firefox 3.5 Yes        
Firefox 3.6 Yes Yes      
Safari 3.1+ Yes     Yes Yes
Chrome 6 Yes Yes   Yes Yes
Opera 10 Yes Coming Soon   Yes Yes
iOS 1-4.1       Yes  
iOS 4.2+ Yes     Yes Yes

* Only TTF fonts that have the allow-embedding bit turned on.

What fonts can I upload?

You can upload any TrueType (.ttf) or OpenType (.otf) font as well as Windows Postscript files (.pfb).

Mac .dfont format is supported but because they can contain multiple fonts, the Generator will only use the first one it finds in the file.

You can use the old resource-fork style Mac fonts (both TrueType and Postscript) as well, if you individually convert them to either macbinary (.bin) or binhex (.hqx) first. To convert these, you must use a third-party utility. StuffIt Deluxe will convert to both formats. Or download the free command line tool for Mac OS X called Mac Binary Converter.

Note that some particular fonts are blacklisted. See below.

What settings should I use?

The Easy setting will generate files that let you support all modern browsers. We highly recommend you just leave it at Easy and enjoy the magic. If you are a power-user and need more control, then by all means use the Expert setting. This will let you take full control over the fonts with a myriad of options for selecting formats, subsetting, CSS and more.

The use of the Expert settings is fodder for another post.

What limits are there?

Here's what you can't do with the Generator:

  • The Generator often cannot convert non-Latin fonts. Particularly CID-encoded ones.
  • You cannot upload a font that is greater than 2 megabytes.
  • You will not be able to convert fonts that are on our blacklist. More on that below.

Why am I getting an error that says my fonts can't be processed?

We have implemented a blacklist system for a couple of reasons.

  • Several foundries have asked to be blacklisted. This includes H&FJ and Emigre.
  • We do not allow you to reprocess exisiting webfonts. They sometimes crash the Generator. Always upload original fonts.
  • Some individual fonts are known to crash the Generator so we blacklist these as well.

What is that config.txt file for?

If you do a lot of processing with the Generator, you can use it to speed up your workflow. Upload the file along with your fonts and your settings will be restored.

Comments

Dustin Hansen

Absolutely awesome. You guys have done a hell of a job here. Can't tell you how much time and trouble the @font-face generator has saved me!

Thanks for all you do!
December 16, 2010 at 03:36 PM

redfish

Hi, I've tried your font generator but have had to go to other solutions because no matter what options I choose, it doesn't preserve all of the properties of the original font. I don't know if its hinting, grid spacing properties, or what, but the font ends up looking different.
December 19, 2010 at 03:29 PM

Ethan Dunham

@redfish - We are doing quite a bit of manipulation to "fix" the fonts for web use. This is definitely not a straight conversion service.
December 20, 2010 at 09:40 AM

Eric Juvet

My results were improved dramatically by using the Expert settings. I unchecked the Remove Kerning option. I have not tested but suspect that Remove Kerning needs to be on for Mac and off for PC.
January 8, 2011 at 01:03 AM

Ethan Dunham

@Eric - In what way were your results improved? Would love to have more detail. Thanks.
January 8, 2011 at 08:33 AM

Heimo

Amazing! Just stumbled upon this site after a recommendation from a friend. Keep on going the good work!
January 21, 2011 at 06:14 PM

inteltone

Hi!
After generating a kit I can't find it. Where can I take it from?
Thanks in advance.
January 24, 2011 at 07:17 AM

inteltone

I solved the problem. Firefox had downloaded my kit. It's interesting Google Chrome is unable to do that. Maybe a bug?
Anyway, thanks alot for your great service!
January 24, 2011 at 10:20 AM

Mary Weekes

there is no place to download font after I upload it.
February 3, 2011 at 03:57 PM

jerry lee

I really feel like an idiot, but I am an older webmaster, taught myself, so I miss a lot, especially these days. Anyway, I don't know where to upload or what to upload? I created an @font face file, do I just upload and use it like I would a css link?
February 16, 2011 at 07:49 PM

John

I also feel like an idiot - how do I upload a font? A 'browse' button appears for a second while the page is loading then disappears.
March 9, 2011 at 12:04 PM

Ethan Dunham

@John - The Generator uses a Flash-based uploader. Sounds like you don't have Flash installed.
March 9, 2011 at 02:57 PM

John

Cheers mate!
March 11, 2011 at 10:38 AM

zazaman

can you explaine: where i have to place the font kit then? or what i should replace?
May 17, 2011 at 10:52 AM

Josh

I am having issues installing the "Shardee" font kit specifically. I think the issues that are the most troublesome is that I am not sure where I am suppose to place this into my Wordpress folder? Does it matter where I place it with this folder? Also, how exactly do I call the URL within the CSS so it can go get this font?

Please help anyone, thanks.
May 21, 2011 at 12:39 PM

Anlita

Could I upload the chinese or other Asia fonts ?
Thanks
May 25, 2011 at 05:39 AM

Anlita

Amazing! But most of the chinese fonts can not be subsetted because of the size. Can you give me some advices to solute this problem?
May 31, 2011 at 09:47 PM

Krisztina

Hi Ethan,
I have been banging my head in the wall for the last wo days to find a solution to my problem. Maybe you have an idea. I am using the following font: http://www.dafont.com/andrew-script.font
I have generated all the necessary files and embedded them in my page. They work beautifully in every browser. Except ... IE7. In IE7 I get little squares instead of the the letters, and I can't get it to work with any of the expert settings either. In IE8 it works nicely.
Please give me a hint to what could I possibly try in the expert settings maybe to make this work.
Thank you so much for your help!
June 8, 2011 at 08:05 AM

Krisztina

P.S If I view the generated html file with the different font sizes, i can see the same problem there too in IE7.
And thank you very much for a great site, I use it a LOT.
June 8, 2011 at 08:17 AM

trenoops

@Josh - There are a few different methods to call your fonts in your CSS - here is a great explanation on how to use the @font-face CSS here: http://randsco.com/index.php/2009/07/04/p680

Did anyone have a problem with the page not loading after the fonts finished being converted. I didn't get an error or anything, and no fonts. I had to use the onlinefontconverter.com which was cool because it sent me an email when it was done converting.

I was wanting to use the expert tools here, because my font has a lot of glyphs I want to make sure I can use, and ones I don't need. Oh well maybe it will work tomorrow.

Thanks for this.
June 13, 2011 at 08:40 AM

trenoops

I got it to work and I love the files generated. this tool is the BEES KNEES - WOOOOOOT
June 13, 2011 at 02:20 PM

Olga

Hi, I added the fonts, pushed download, but that's all, and freezes, and nothing happens. The generator does not create the file. It did not respond. And it happens in all browsers
June 29, 2011 at 04:21 AM

Lars

Is it in any way possible to change the x-height manually when uploading a font? That would be a nice feature.
July 7, 2011 at 03:55 PM

Submit a Comment

Comments are closed.

Sponsored Links

New To Fonts?

Download our free beginners guide to fonts.

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

Connect

Sponsored Links

 

Font Squirrel relies on advertising in order to keep bringing you great new free fonts and to keep making improvements on the 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.