Internet Explorer 6 onwards and recent versions of all mainstream browsers support the CSS fonts module.

Preparing the font files and CSS

The quickest and most efficient way of preparing font files and getting appropriate CSS to use them that I’m aware of is the Font Squirrel @font-face Generator. Here are a few notes on using it and choosing from its options.

My currently preferred settings

Adding fonts

Clicking the Add Fonts button allows you to select the font(s) you wish to use. If you don’t already have a font that is legal to use via @font-face, have a read of Where to get web fonts.

Font formats

Different browsers have different font format-reading capabilities, so more than one format of font is required. Each browser will only have to download one format, so don’t worry about extra bandwidth being wasted.

Very briefly: TrueType is used by many, EOT is the only format Internet Explorer can use, and WOFF can be used by Firefox. I use TrueType, EOT and WOFF (OpenType).

Alternate Formats

@font-face rules are well supported, so Cufón shouldn’t be necessary.

Font Options

I’ve found Add Hinting to improve font rendering in Windows, so I keep this option selected.

File sizes of fonts have been quite small, so I don’t feel the need to Simplify Outlines. And the same goes for Remove Kerning.

However, reducing file sizes without loss of quality is always a good thing to do, and subsetting fonts can really make a difference, especially if the font you are using has an extensive range of glyphs. So tick Subset Font… and spend a little time narrowing down the included glyphs to those you will actually use this font for with the aid of the font-face generator’s easy-to-use options.

I haven’t experimented with the Base64 Encode option as yet, but not all browsers can use it anyway.

CSS Code

I opt for the “Mo’ Bulletproofer” method from Richard Fink as it avoids Internet Explorer making requests of your server which result in 404′s. You can read technical details about the methods using the links under the fields at Font Squirrel’s page if you wish to know about the ins and outs.

Agreement

As you’re putting the resultant files in a publicly accessible place, download-able by all, it’s important that you use fonts that come with the appropriate permissions.

Download Your Kit

Once you’ve signaled your agreement, the download button will appear.

Testing

Extract the zip file you’ve downloaded and open up demo.html in a web browser to see the font at various sizes. Check that it displays in an acceptable fashion at the kind of size you’ll be using it in different browsers. Particularly look out for the display quality in Windows versions of browsers.

Using

Copy the actual font files (e.g. .eot, .ttf, .woff) to your website directory. I place them in a subdirectory called ‘fonts’.

Open up stylesheet.css in your text editor and copy the given CSS into an appropriate CSS file of your own that is used by your pages.

Example CSS:

@font-face {
    font-family: 'BallparkWeiner';
    src: url('ballpark_weiner.eot');
}

@font-face {
    font-family: 'BallparkWeiner';
    src: url(//:) format('no404'), url('ballpark_weiner.woff') format('woff'), url('ballpark_weiner.ttf') format('truetype');
}

font-family can be anything you like.

Unless you keep your CSS file and font files in the same directory, you will need to change the src urls in the CSS. For example, if you keep your font files in /fonts and your CSS files in /css, you would change

url('font_name.ttf')

to

url('../fonts/font_name.ttf')

Then style elements which should be displayed in the new font with CSS. An example:

h1 {
    font-family: 'BallparkWeiner', Georgia, serif;
}

Test in a variety of browsers, and enjoy your new-found typographic freedom!

Further reading

Nice Web Type has some excellent articles on technical details, font licensing information and where to get fonts which can be used with @font-face rules.

Print design and text frames

When thinking about ways to apply paragraph spacing to text in documents, I’m often reminded of my time working at a printer’s studio. When using QuarkXPress, and later InDesign, we could use ‘paragraph styles’ to assign spacing above or below text, and different people in the studio had their own ways of working things. If I remember correctly, I usually inserted space before my paragraphs, and my colleague who sat at the desk next to me inserted space after his paragraphs. It was interesting to discuss the pros and cons of each approach, and I enjoyed picking up tips which I could then use in future.

14pt 'space before' applied to a paragraph in InDesign

Now, when a heading or paragraph which is set to have space before it (e.g. 14pt) sits at the top of a text frame in a QuarkXPress or InDesign document (e.g. a non-breaking subheading that happens to start a new page), it does not have its before paragraph spacing applied, and continues to butt up against the top of its containing text frame.

In the context of print artwork, this approach by desktop publishing software works well and avoids many awkward situations. However, a web page requires more strict application of style rules. There is no such concept as a text frame in web pages – they are themselves textual documents.

The issue in web pages

For us web designers, a heading or paragraph keeps its top margin even if it is the first element in its parent element, which means we sometimes have to explicitly assign styling to get rid of unwanted margin-top values.

An old way

One suboptimal method was to assign a class to the first text element (in the example below, a heading) to which we wished to give a zero top margin.

A disadvantage to this method is that we were introducing a presentational-only class, meaning it was inefficient and did not really align with the concept of keeping our markup structural. If a new element was inserted before the heading (e.g. an image), we would have had to manually remove the class from our paragraph and apply it to our new element instead.

A “new” way

My brother, Ian, came up with a far better way yesterday.

The CSS rule applies our desired zero top margin to any element which is the first child of our article div. It avoids having to assign a class to our element, leaving it free of unsemantic fluff, and thus requires no manual class switching should our content change. We can now set top and bottom margins to elements as we wish, and leave it to our new CSS rule to ensure we don’t have an unsightly gap at the top of the relevant content area. It’s adaptable, elegant, and is a good example of how simple styling a document with CSS can, and should, be.

Of course, this isn’t really a new method, and has been available to us for a long time courtesy of CSS2. The reason it may not have been at the forefront of our minds and present in our work until now is its lack of support in Internet Explorer 6.

Pushing on despite IE6

The above scenario is just one example of where using current capabilities of CSS can save us work and make life as authors of web pages decidedly easier, so it could be well worth investing a little time to get Internet Explorer 6 and 7 (and 8 when wanting to use CSS3) to play along with the rest of the world. Here are some options.

ie7-js

ie7-js is “a JavaScript library to make MSIE behave like a standards-compliant browser”, and you can see the CSS support it adds at the projects test page, as well as the rendering bugs it fixes.

Within the “ie7-js” project there are two main JavaScript scripts: IE7.js and IE8.js. If you decide to use IE8.js, you don’t need IE7.js as all its functionality is included in IE8.js. If you’re new to ie7-js, all the instructions you need are on the main project page.

ie-css3.js

ie-css3.js “allows Internet Explorer to identify CSS3 pseudo selectors and render any style rules defined with them”.

While IE8.js provides support for Internet Explorer for some CSS3 pseudo selectors (the ones which Internet Explorer 8 itself has as I understand it), there are others that it does not handle and which ie-css3.js does: :nth-of-type, :nth-last-of-type, :first-of-type, :last-of-type and :only-of-type.

eCSStender

There is some overlap between IE8.js and ie-css3.js (and feature gap if IE7.js and ie-css3.js are used), meaning there’s still work to do on creating the “complete” solution. eCSStender (pronounced “extender”) sounds very powerful, but I haven’t looked at it in detail yet – it seems to be more complicated to use than the two aforementioned projects. Hopefully I can work it out to see if it can provide the CSS emulation for Internet Explorer that I’m after.

No time like the present

I feel that now is a good time to finally start using more of the CSS2 and CSS3 goodness in my web page styling that Internet Explorer and its market share have hitherto skuppered, so I’ll be testing these projects further with a view to settling on a solution.

Have you had experience with using new types of CSS selectors, and emulating CSS2 and CSS3 capabilities in Internet Explorer? I’d be very interested to hear how you’ve got on.

Update: Chris Coyier has included the basics of this approach in a more concise form at CSS-Tricks – worth reading if the above isn’t clear to you.