Facelift v1.2 beta 4 introduces a new feature called the Font Collection.  A Font Collection is just that, a collection of similarly faced fonts in various styles.  This means that you no longer have to create a separate entry for Your Font and Your Font Italic.  By combining the Font Collection with the CSS values set in your web page, FLIR can intelligently detect which font variant to use.

Let’s look at an example to make things a little more clear.  Take a look at the Interstate font family (external site).  It contains many different variants of the original, regular type face.  Let’s setup a Font Collection to use a few of these variants.

Setup a Font Collection in config-flir.php

We’re going to keep it simple and only use Regular, Bold, Italic, and Bold-Italic right now.  To set this collection up, open your config-flir.php file and enter the following:

// Prepare the font collection.  The key used (”interstate”) will be how you
// refer to the font in your web page.  This has not changed.
// Instead of using the font filename as the value, use “array()”.  This lets Facelift know
// that you are using a font collection.
$fonts['interstate']        = array();

// The first entry in the collection is the default entry.
// This is the variant that will be used if a match can’t be found.
// The file is the filename of the font in your fonts directory.
// Don’t forget the [] brackets for each new variant!
$fonts['interstate'][]     = array(’file’ => ‘interstate_regular.ttf‘);

// Next, we will define the bold variant.  As you can see, the definitions are based on CSS properties.
// For bold, valid CSS property values are bold, bolder, or lighter.
// We’re just going to define regular bold at this time.
$fonts['interstate'][]     = array(’file’ => ‘interstate_bold.ttf’
,’font-weight’                => ‘bold’);

// Now we’ll define italic in a similar manner.
// But, this time we’ll use font-style, because that is the CSS property responsible for italic.
$fonts['interstate'][]     = array(’file’ => ‘test/interstate_italic.ttf’
,’font-style’                => ‘italic’);

// And finally, we’ll combine the two to create the Bold-Italic version.
$fonts['interstate'][]     = array(’file’ => ‘test/interstate_bolditalic.ttf’
,’font-style’                => ‘italic’
,’font-weight’                => ‘bold’);

Configure the Facelift Javascript to Use Font Collections

Now that we have our Font Collection setup, let’s take a look at how we can use it.

<p id="test" style="font-face: interstate, arial, helvetica;”>This is a paragraph
of <em>test text</em>.  Facelift will <strong>replace</strong> all of it and
use the proper font variant based on the <strong><em>CSS styles</em></strong> that
have been applied.</p>

<script>
FLIR.init();

// useExtendedStyles is necessary to get Font Collections to work!
// If you don’t enabled extended styles, then you will always get the default font for the collection.
// The other options are not required to use Font Collections.
var myFStyle = new FLIRStyle({ mode:’wrap’, realFontHeight:true, useExtendedStyles:true });

// Facelift will detect the bold and italic children.
FLIR.replace(document.getElementById(’test’), myFStyle);
</script>

Multiple CSS Properties Supported

You aren’t limited to just bold and italic!  You can set any number of variants to match the following CSS properties:

• font-stretch
• font-style
• font-variant
• font-weight (only bold, bolder, and lighter values can be used)
• text-decoration

So, using the above example, if you wanted to create a bold, italic, underlined, condensed, small-caps version of Interstate you could add the following to the collection:

$fonts['interstate'][]     = array(’file’ => ‘test/interstate_super.ttf’
,’font-stretch’            => ‘condensed’
,’font-style’                => ‘italic’
,’font-variant’            => ’small-caps’
,’font-weight’                => ‘bold’
,’text-decoration’        => ‘underline’);

The styles would be detected just like bold and italic, and the proper font face would be used for image generation.

I just wish the coming font-face property would handle fonts in a similar manner.  font-face is broken as it is currently implemented.[/rant]

This entry was posted on Wednesday, September 10th, 2008 at 17.17.54 and is filed under facelift. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.