Nice web-fonts for every browser

Update: This article is obsolete. After some more research I’ve found an even better way to create perfect web-fonts in 3 steps and created a web-font generator tool called Fontie, which does all the work for you…

I’m using web-fonts for quite a while now, and I really love them – somehow. On the one hand web-fonts finally give us designers the ability to create really individual websites, but on the other hand this freedom doesn’t come for free. The cost is the quite complex handling of web-fonts. Starting with the different formats (woff, etf, ttf, svg) different browsers expect for the font-data, continuing with the CSS needed to include fonts into your styles and not really ending with the mess you could get into when trying to find a legal font you could use on a website.

I was lucky enough to find FontSquirrel a few years ago, which offers tons of free high-quality fonts and a @font-face generator, which converts a TTF- or OTF-file into the several web-font formats and generates the CSS to include the font into your page. Quite handy – and until a few days ago I thought this is all you need to know about web-fonts…

The whole story (scroll down for the how-to)

The big thing, I was missing so far, was font hinting (additional information to improve font rendering). FontSquirrel’s generator has some options for hinting, but I never saw a big difference when playing with them. Now I know that this was only because I live in a OSX and Linux world and never cared a lot about details such as font-rendering when I tested my websites on Windows. Otherwise I would have seen that the rendering of some web-fonts (especially my beloved Calluna I use here on Pixels|Bytes) is quite buggy there.

A closer look at font rendering told me that OSX ignores hinting completely and Linux seems to go a similar way, so it’s no big surprise, that the hinting options never changed much for me. Windows on the other hand, has three different rendering engines and all of them need good hinting information to render nice-looking fonts. If these information are bad or missing the font will look something between strange and ugly.

So the trick seems to be to give Windows the right hinting it needs to render fonts correctly. The gold way of hinting is to do it by hand for each letter, but this is quite time consuming and needs a lot of knowledge and experience in typography, so usually only expensive premium fonts have this. Luckily there are also ways to generate hinting information automatically and a lot of free fonts include such hinting, but the results vary – especially when the hinting is used for screen rendering.

FontSquirrel’s @font-face generator has the option to add some automatic hinting to the created web-fonts, but this sometimes causes the font to look a bit different that the original, so I can’t recommend it. Keeping the original hinting values doesn’t seem to work in most cases, so we need to find a way to generate some sceen-optimized hinting info and add it to the font before we convert it for the web.

Fortunately Werner Lemberg started the project ttfautohint (available for Windows, OSX and Linux), which aims to auto-generate high-quality hinting information for web-fonts, and as far as I can tell it does a very good job. The tool offers some options to refine the results, but apart from one little tweak the default values worked well for the fonts I auto-hinted so far. So we finally have everything together to create some web-fonts, which look good on all browsers and plattforms.

How to create a web-font with maximum compatibility

The ingredients:

  • 1 free TrueType- or OpenType-Font
  • Werner Lemberg’s ttfautohint
  • FontSquirrels’s @font-face generator

Step 1: Convert OpenType to TrueType (optional)

ttfautohint can only handle ttf-files, so you have to convert any other fonts into the TrueType format. There are several font-converters out there, but the ones I tried all created TrueType-files, which failed in the second step. Luckily the conversion mechanism of the @font-face generator creates usable files, so we stick with this one here:

  1. Go to http://www.fontsquirrel.com/fontface/generator
  2. Click on Add Fonts and upload otf2ttf_config.txt
    This set the the required generator options automatically
  3. Click on Add Fonts and upload your font-file
  4. Confirm that the fonts you’re uploading are legally eligible for web embedding
  5. Click on Download your Kit

The downloaded fontkit contains several files, but we only need the TrueType-font, so extract the tff-file from the archive and delete the zip-file afterwards.

Step 2: Add the hinting

For this step you’ll need the the font to be in the TrueType format, so you should either have a font, which is already in that format or you should have converted it to TTF in Step 1. Now open a terminal and type the following commands:

  1. Install ttfautohint on your system
  2. cd /path/to/your/font/file
  3. ttfautohint --strong-stem-width=g fontname.ttf fontname-grayscale.ttf
  4. ttfautohint --strong-stem-width=D fontname.ttf fontname-directwrite.ttf

That’s all. Not too complicated even if it involves some commandline stuff, so off to the next step.

Step 3: Create the web-fonts

With all preparations done we can now generate the actual web-fonts. We need to create two packages: One for the grayscale-fonts and one for the directwrite-fonts, so we need to run this step two times with slightly different options. First execute all steps and choose A if possible and then repeat everything but choose B:

  1. Go to http://www.fontsquirrel.com/fontface/generator
  2. A: Click on Add Fonts and upload grayscale_config.txt
    B:
    Click on Add Fonts and upload directwrite_config.txt
  3. A: Click on Add Fonts and upload fontname-grayscale.ttf from step 2
    B:
    Click on Add Fonts and upload fontname-directwrite.ttf from step 2
  4. Confirm that the fonts you’re uploading are legally eligible for web embedding
  5. Click on Download your Kit

You should have two fontkit-archives afterwards, which be combined into one package in the final step.

Step 4: Create the all-in-one package

Almost all browsers are happy with the directwrite-fonts, but IE9 & 10 (yap, IE once again ^^) don’t seem to like this kind of hinting. That’s why we created the grayscale-fonts, which are rendered correctly by all Internet Explorer versions. Luckily IE is the only browser, which unterstands Microsoft’s EPT-Format, so we can use this feature to create a combined package, which offers grayscale-fonts for the IE and directwrite-fonts for all other browsers:

  1. Extract the directwrite-fontkit
  2. Extract fontname-grayscale-webfont.eot from the grayscale-fontkit
  3. Copy fontname-grayscale-webfont.eot into the directwrite-fontkit folder
  4. Edit the stylesheet.css in the directwrite-fontkit folder as follows:
    @font-face {
        font-family: 'fontname';
        src: url('fontname-grayscale-webfont.eot');
        src: url('fontname-grayscale-webfont.eot?#iefix') format('embedded-opentype'),
             url('fontname-directwrite-webfont.woff') format('woff'),
             url('fontname-directwrite-webfont.ttf') format('truetype'),
             url('fontname-directwrite-webfont.svg#fontname') format('svg');
        font-weight: normal;
        font-style: normal;
    }

You should open the fontname-demo.html after you’ve saved your changes to check if everything went right. I recommend to do the check with more than one browser (especially IE) and to compare the font rendering closely. If everything looks right you’re done – well, almost…

 

Step 5: How to enforce font smoothing (update 16-03-2013)

The fontface-kit above works well on all system that have font smoothing enabled, which is true for all Macs and Linux and most Windows versions, but not for Windows XP. Even though XP has the capabilities to render fonts with Microsoft’s own font-smoother called ClearType, it is not enabled by default – for whatever reason. Anyway, this is no problem for IE and Firefox users as these browsers always use ClearType, but Chrome, Safari and Opera obey to the system settings, which can result in some pretty messed up fonts.

Luckily all of the latter browsers can handle SVG fonts, which is quite fortunate since SVG seems not to be rendered by the system, but by the browser itself. In that special case the browsers ignore the system settings and always use font-smoothing, what gives us a way to enforce font-smoothing even if it’s disabled in the system settings.

Various articles (like here & here) suggest that all we have to do is to put SVG in front of the other formats in the font-face CSS et viola – smooth fonts for everyone. But wait, there’s a problem: Since SVG fonts doesn’t include any hinting information the rendered fonts don’t look as crisp as their hinted counterparts on a system that has font-smoothing enabled.

Conveniently, some guy at User Agent Man pointed out a pretty neat way how to detect font-smoothing using JavaScript I used his code as a base for a little script called Font Smoothie, which switches to SVG fonts only if font-smoothing is actually disabled. You can find the code in my Font Smoothie GIST over at GitHub.

The usage is pretty easy. Just make sure you have your web fonts available as SVGs download the Font Smoothie script and include it anywhere in your page:

<script src="https://gist.github.com/letorbi/5177771/raw/fontsmoothie.min.js" type="text/javascript"></script>
<style type="text/css">
@font-face {
    font-family: 'fontname';
    src: url('fontname-grayscale-webfont.eot');
    src: url('fontname-grayscale-webfont.eot?#iefix') format('embedded-opentype'),
         url('fontname-directwrite-webfont.woff') format('woff'),
         url('fontname-directwrite-webfont.ttf') format('truetype'),
         url('fontname-directwrite-webfont.svg#fontname') format('svg');
    font-weight: normal;
    font-style: normal;
}
</style>

As you can see we’re using the code from step 4 here, since no special CSS or anything else is needed. The little Font Smoothie script (~600 bytes) will take care of everything to enable SVG when necessary. Take a look at the Font Smoothie enhanced Calluna demo page, if you’re still in doubt and want to see Font Smoothie in action (an tell me if it’s not working ^^).

Is this all?

Well, yes – in general. I converted a bunch of fonts using the instructions above and they worked so far, but you might have to tweak some @font-face generator or ttfautohint options for some fonts anyway. Web-fonts are still a tricky thing and I’m really interested to read about your experiences here in the comments.

Finally the link to download the Font Smoothie GIST and all needed _config.txt files in one ZIP-archive. The config files are quite readable, so you can also set the options by hand if you like. I only set them by file in the how-to to keep the instructions as short as possible. Take a look at the Font Smoothie GIST, if you want to know how the script works exactly. I commented all relevant parts, so I guess it shouldn’t be too difficult to read.

17 thoughts on “Nice web-fonts for every browser”

  1. Hey Torben!

    Great article – except – for those like me – who have no idea how to open terminals or dont have knowledge on how to extract or find the CSS stlesheet – it’s a bit difficult to solve.

    I’m having troube with the font “Champagne & Limousines” displaying correctly.
    (I’ve checked the site on IE, Firefox and Chrome and it’s the same “bad” result.)

    I used the FontSquirrel generator and installed the font in my ProPhoto Blog Theme on WordPress.

    Please take a look at my page for an example:
    http://soutinephotography.se/information/nyfodd

    and compare the header letters with the font on how it’s supposed to look.
    Notice the “M” and the “N” for example. On my Prophoto site it looks like the sides of the letters are thick and then thin in the middle. But the original font has the same thin line all the way through.

    Can you possible help me?
    I understand it must be something about rendering but I’m not so specialized in that area and have no idea on how to fix it…

    Kind Regards,

    /Gabriella

    1. Yeah it’s a bit tricky, if you’re not used to terminals and editing code – sry for that ;) Maybe I’ll write a nice, handy webfont-generator-tool sometime, but I’m afraid I’m a bit too busy for that right now…

      If I understand you correctly you’ve used the Font Squirrel generator with the default options to create your web-font, haven’t you? With the default options Font Squirrel will replace any hinting information, which is already stored within the font, with its own, auto-generated hinting. This hinting works well on systems which don’t use any font-smoothing (old Win XP version for example), but can result in strange looking letters when font smoothing is enabled.

      In that case it might help, if you just re-create your web-font, but this time keep the hinting information that ship with the font: Go to Font Squirrel’s webfont generator, upload your font, open the expert settings, switch the option “Truetype Hinting” from “Font Squirrel” to “keep existing” and generate your web-font kit.

      This might fix the misshaped letter issue, but could result in bad rendered fonts when font-smoothing is disabled, so you should visit your page with some differed browsers after you’ve change the font and check how it looks. I recommend to do that on a Windows XP System, since it seems to be most sensitive to bad hinting. My usual test include: Internet Explorer, Firefox and Chrome once with font-facing enabled and once disabled (this MS Knowledge Base explains how to turn font-smoothing on and off).

      I guess this is the best option you have if you don’t want to mess around with ttfautohint. Please let me know how it worked out.

      PS: The fonts on your page looked good on my screen here (I’m on Chrome/Linux right now), so I guessed more or less what exactly your problem is. I hope my comment helps you anyway ;)

    1. Ok, that’s strange. I’m using Chrome/Linux right now and also tested Chrome/Mac & Windows. What system are you using exactly and could you send me a screenshot?

    2. After some more research I’m now pretty sure, that you’re using Win XP with ClearType disabled. The solution is to use SVG if font-smooting is disabled by the system. Read Step 5 in this post for more details.

  2. Hi Torben!
    Thanks for this post. Very useful!
    Do you think that the fontsmoothie script will works also on the external css files called from a page ?

    1. Since the script modifies the styles after the CSS-file has been loaded, I don’t think that using external stylesheets would cause any problems. However, I haven’t tested it, so you have to try it yourself. If you do so it would be nice, if you could tell me about your results here :)

  3. Hi,

    I think your settings files no longer work properly with font-squirrel. They no longer check the EOT box etc.

    Cheers

    1. Yes, they’re not working any more with Font Squirrel’s new generator. I tried to create new config files, but there seems to be a bug in the generator itself, which prevents config-files from being loaded correctly.

      However, this ain’t that bad, since the config-files only select certain font-formats (eot for greyscale; woff, svg and ttf for directwrite) and set the hinting option to keep the existing information instead of using the Font Squirrel hinting. So all you have to do is to set these options by hand and everything should work fine.

      1. btw settings files was working. just need to switch to open “all types” not “custom types”.

  4. Thank You for Your post. This saved me a lot of trouble… because in simple way – by uploading font to FS … web fonts are totally screwed. But by your instruction everything is superb!

    Only in final step (when converting D and G webfonts) to those, who need localized characters, i advice to enable: Custom Subsetting…

    And btw, for those who are afraid of consoles – ttfautohint-0.96-win32 now is with GUI. Just select grayscale+run and then DW Cleartype+run.

    1. Woot – damn! I only tested FF on Windows 7, but yes they do. I mean they don’t look as worse as they would do without autohinting, but still far from perfect. I’m pretty sure it worked when I wrote this article and I’m investigating the issue right now.

      Hope, to be back with a solution later this day…

      PS: Can you post a screenie of how it looks like on Win8 somewhere, since I don’t have access to a Win8 system right now.

  5. Excellent Work, Torben! I’ve been searching for this since a long time and – although it’s a bit tricky task – it is working like a charm! Smooooooooth thanks!

  6. I wish people would stop trying to smooth the edges of fonts, especially in web pages.

    For those of us with better-than-average vision, anti-aliased fonts appear blurry, i.e. out of focus. Our eyes keep trying to bring the text into sharp focus, which is impossible, and that gives us eyestrain and headaches. ClearType is even worse, because the text appears to have chromatic distortion.

    To prevent this, I have disabled all anti-aliasing. Because your blog relies on it, the text looks terrible. It’s contains a mixture of thin and thick vertical lines. If I were to enable anti-aliasing, it would look blurry. Your choice of font has made it impossible for your text to look good.

    Please just stick to fonts that render decently without smoothing.

Leave a Reply

Your email address will not be published. Required fields are marked *