LessFuss Design

Rather than exporting individual images or using PHP image replacement as I normally would, I recently tried out Typeface JS – a method that uses javascript to embed fonts – to make use of a non-standard typeface in the headings of a web design. Typeface JS is pretty easy to use, but there’s one thing to be wary of: how you use the font-weight property in your CSS.

Typeface JS and font-weight

On the Usage page, the Typeface JS site says this:

Remember that heading styles are bold by default, so you’ll either need to add font-weight: normal to you heading styles, or load the bold version of the font if that’s what you’re after. Typeface JS website

At first I found this to be slightly misleading. What it should probably say is that the font-weight property in the CSS should always match the property for the font you’re using, since each Typeface JS font can only be specified by one CSS font-weight setting.

In practice, you may want to use different weights of the same font on the same page. Normally this is a case of using font-weight: normal for one and font-weight:bold for the other. But with Typeface JS you will need to create javascript files for both bold and normal weight fonts (from the Typeface JS font conversion page ), and use CSS classes to specify which one should be used.

Is my font bold or normal weight?

Might seem like a pretty daft question, but with some fonts it may not be immediately obvious whether they’re bold or normal weight. Once you’ve got the javascript file for it, you can find this information at the end of the document, along with the CSS font-family name (should this not also be immediately obvious):

A quick glance at the JS file shows that storing a font’s details ends up in a pretty bulky file. When you get the options for converting the font, only choose the character set you’re going to need rather than the entire set of options, as this can significantly reduce the filesize.

Museo, anyone?

Despite following these rules, I’m having nothing but trouble using Museo 700 with Typeface JS, which comes out corrupted and more like Egyptian heiroglyphics. Anyone else had the same trouble?