At the very least, you should be using basic style linking. If you are a newbie, you might be using it and didn't even realize that you were, or maybe you didn't understand why. With basic style linking, elements that should be bolded or italicized, and are bolded/italicized by the browser by default, can keep their styling without any fake styling being applied. This helps you to avoid resetting defaults and to control how the layout degrades. With basic style linking, you still have multiple family names, which gives you more control in old IE browsers, but the appropriate styles and weights are assigned to them.
Pros:
- Degrades well if webfonts don't load
- Maximum Control of your layout if you are still catering to older IE browsers.
Cons:
- Cumbersome markup.
Browser Support:
- Chrome: 100%.
- Safari: 100%.
- Firefox: 100%.
- Opera: 100%.
- IE9 and up: 100%.
- IE7 & IE8: good support as long as the font internals match the css.*
Notes:
Some html elements, such as h tags, by default are given a bold attribute by browsers. If this is changed, your layout won't degrade well... the element will not be bolded if the webfonts fail. Therefore, you should use font-weight:bold; in your syntax to avoid the browser applying a false bold to your webfont. However, if the internal flags of the font do not match your css, it will fail in IE8 and older.
*Basic style linking is supported by IE8 and older with one caveat... there are internal flags inside the font that must match your css. You can view the test page in IE8 to experience it for yourself.
/* Example: */
h1 {
font-family: 'MuseoSlab1000';
font-weight: bold;
}
@font-face {
font-family: 'MuseoSlab900';
src: url('Museo_Slab_1000-webfont.eot');
src: url('Museo_Slab_1000-webfont.eot?#iefix') format('embedded-opentype'),
url('Museo_Slab_1000-webfont.woff') format('woff'),
url('Museo_Slab_1000-webfont.ttf') format('truetype'),
url('Museo_Slab_1000-webfont.svg#MuseoSlab1000Regular') format('svg');
font-weight: bold;
font-style: normal;
}
array(
'font-family' => '"MuseoSlab100", ' . $default_font ,
'font-weight' => 'normal',
'font-style' => 'normal',
),
'syntax' => array(
'font-family' => '"MuseoSlab100"',
' src' => 'url("...")',
'font-weight' => 'normal',
'font-style' => 'normal',
),
'font_name' => 'Museo Slab 100',
'flags' => array(
'regular' => 'no',
'bold' => 'no',
'italics' => 'no',
),
'tr_class' => 'fam100',
);
$table_content[] = array(
'code' => array(
'font-family' => '"MuseoSlab100", ' . $default_font ,
'font-weight' => 'normal',
'font-style' => 'italic',
),
'syntax' => array(
'font-family' => '"MuseoSlab100"',
' src' => 'url("...")',
'font-weight' => 'normal',
'font-style' => 'italic',
),
'font_name' => 'Museo Slab 100 Italic',
'flags' => array(
'regular' => 'no',
'bold' => 'no',
'italics' => 'yes',
),
'tr_class' => 'fam100',
'font_class' => 'italic',
);
$table_content[] = array(
'code' => array(
'font-family' => '"MuseoSlab300", ' . $default_font ,
'font-weight' => 'normal',
'font-style' => 'normal',
),
'syntax' => array(
'font-family' => '"MuseoSlab300"',
' src' => 'url("...")',
'font-weight' => 'normal',
'font-style' => 'normal',
),
'font_name' => 'Museo Slab 300',
'flags' => array(
'regular' => 'no',
'bold' => 'no',
'italics' => 'no',
),
'tr_class' => 'fam300',
);
$table_content[] = array(
'code' => array(
'font-family' => '"MuseoSlab300", ' . $default_font ,
'font-weight' => 'normal',
'font-style' => 'italic',
),
'syntax' => array(
'font-family' => '"MuseoSlab300"',
' src' => 'url("...")',
'font-weight' => 'normal',
'font-style' => 'italic',
),
'font_name' => 'Museo Slab 300 Italic',
'flags' => array(
'regular' => 'no',
'bold' => 'no',
'italics' => 'yes',
),
'tr_class' => 'fam300',
'font_class' => 'italic',
);
$table_content[] = array(
'code' => array(
'font-family' => '"MuseoSlab500", ' . $default_font ,
'font-weight' => 'normal',
'font-style' => 'normal',
),
'syntax' => array(
'font-family' => '"MuseoSlab500"',
' src' => 'url("...")',
'font-weight' => 'normal',
'font-style' => 'normal',
),
'font_name' => 'Museo Slab 500',
'flags' => array(
'regular' => 'yes',
'bold' => 'no',
'italics' => 'no',
),
'tr_class' => 'fam500',
);
$table_content[] = array(
'code' => array(
'font-family' => '"MuseoSlab500", ' . $default_font ,
'font-weight' => 'normal',
'font-style' => 'italic',
),
'syntax' => array(
'font-family' => '"MuseoSlab500italic"',
' src' => 'url("...")',
'font-weight' => 'normal',
'font-style' => 'italic',
),
'font_name' => 'Museo Slab 500 Italic',
'flags' => array(
'regular' => 'yes',
'bold' => 'no',
'italics' => 'yes',
),
'tr_class' => 'fam500',
'font_class' => 'italic',
);
$table_content[] = array(
'code' => array(
'font-family' => '"MuseoSlab700", ' . $default_font ,
'font-weight' => 'bold',
'font-style' => 'normal',
),
'syntax' => array(
'font-family' => '"MuseoSlab700"',
' src' => 'url("...")',
'font-weight' => 'bold',
'font-style' => 'normal',
),
'font_name' => 'Museo Slab 700',
'flags' => array(
'regular' => 'no',
'bold' => 'yes',
'italics' => 'no',
),
'tr_class' => 'fam700',
);
$table_content[] = array(
'code' => array(
'font-family' => '"MuseoSlab700", ' . $default_font ,
'font-weight' => 'bold',
'font-style' => 'italic',
),
'syntax' => array(
'font-family' => '"MuseoSlab700italic"',
' src' => 'url("...")',
'font-weight' => 'bold',
'font-style' => 'italic',
),
'font_name' => 'Museo Slab 700 Italic',
'flags' => array(
'regular' => 'no',
'bold' => 'yes',
'italics' => 'yes',
),
'tr_class' => 'fam700',
'font_class' => 'italic',
);
$table_content[] = array(
'code' => array(
'font-family' => '"MuseoSlab900", ' . $default_font ,
'font-weight' => 'bold',
'font-style' => 'normal',
),
'syntax' => array(
'font-family' => '"MuseoSlab900"',
' src' => 'url("...")',
'font-weight' => 'bold',
'font-style' => 'normal',
),
'font_name' => 'Museo Slab 900',
'flags' => array(
'regular' => 'no',
'bold' => 'yes',
'italics' => 'no',
),
'tr_class' => 'fam900',
);
$table_content[] = array(
'code' => array(
'font-family' => '"MuseoSlab900", ' . $default_font ,
'font-weight' => 'bold',
'font-style' => 'italic',
),
'syntax' => array(
'font-family' => '"MuseoSlab900italic"',
' src' => 'url("...")',
'font-weight' => 'bold',
'font-style' => 'italic',
),
'font_name' => 'Museo Slab 900 Italic',
'flags' => array(
'regular' => 'no',
'bold' => 'yes',
'italics' => 'yes',
),
'tr_class' => 'fam900',
'font_class' => 'italic',
);
?>