CSS Font Family stretch & weight Test HTML

Arial Narrow/Condensed, Black/Extra Bold, etc. in
Firefox (hardware acceleration), Chrome and Safari on
Windows 7 DirectWrite Typography System

Since Windows Vista SP2 a new DirectX API font rendering was introduced, also in use in Windows 7: DirectWrite (Introduction). Since then mainly Open Source Software like Firefox (Gecko) has problems to list/display sub-font-family-fonts like Arial Narrow (Arial Condensed). See Firefox Bug 644385 - Arial Narrow, Arial Black fonts do not show on page, Firefox Ignores Font Family?, Honing a Cross-Browser Font Stack. The solution for Firefox is to use the base font-family like Arial with CSS font-stretch or CSS font-weight. Internet Explorer 9 (Trident) has no problem to render the font in both definitions. To complicate things Chrome and Safari (WebKit) recognize only the old sub-family definition. For easy Cross-Browser Font Stacks Firefox should also recognize the old sub-family definition. Until then you have to use multiple definitions and pay attention on the behavior when a sub-family is not installed.
CSS Sample style: font-family: 'Arial Narrow', Arial; font-stretch: condensed;
To complicate things sometimes spaces etc. are interpreted differently: Is there a web-safe Helvetica Neue CSS font-family stack? (free, embeddable font similar to Helvetica: TeX Gyre Heros).

Here is a list of common examples to test the browser:

'Arial Narrow', 'ArialNarrow', 'Arial-Narrow'
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Quick Brown Fox Jumps over the Lazy Dog. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß.

Arial; font-stretch: condensed;
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Quick Brown Fox Jumps over the Lazy Dog. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß.

'Arial Black'
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Quick Brown Fox Jumps over the Lazy Dog. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß.

Arial; font-weight: 900;
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Quick Brown Fox Jumps over the Lazy Dog. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß.

'Liberation Sans Narrow'
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Quick Brown Fox Jumps over the Lazy Dog. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß.

'Liberation Sans'; font-stretch: condensed;
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Quick Brown Fox Jumps over the Lazy Dog. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß.

'DejaVu Sans Condensed'
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Quick Brown Fox Jumps over the Lazy Dog. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß.

'DejaVu Sans'; font-stretch: condensed;
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Quick Brown Fox Jumps over the Lazy Dog. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß.

'DejaVu Sans Light'
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Quick Brown Fox Jumps over the Lazy Dog. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß.

'DejaVu Sans'; font-weight: 100;
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Quick Brown Fox Jumps over the Lazy Dog. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß.

'DejaVu Serif Condensed'
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Quick Brown Fox Jumps over the Lazy Dog. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß.

'DejaVu Serif'; font-stretch: condensed;
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Quick Brown Fox Jumps over the Lazy Dog. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß.

'Helvetica LT Std Cond'
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Quick Brown Fox Jumps over the Lazy Dog. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß.

'Helvetica LT Std'; font-stretch: condensed;
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Quick Brown Fox Jumps over the Lazy Dog. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß.

© 2012-01 CC-BY CR