This page uses no style linking. Every style is essentially its own family. This method is how most entry level programers start using web fonts, mostly because they don't know any better.
Pros:
- Precise control over the design in old IE browsers.
Cons:
- Cumbersome markup. You can see how complicated the css is. Remember, this is a simple site... it get exponentially worse as your site expands.
- Degrades poorly. Elements that were meant to be bold or italicized won't be if the web-fonts fail to load. Use this link to break the web fonts and see for yourself. All the fonts will be the same weight and style.
Browser Support:
- Chrome: 100%.
- Safari: 100%.
- Firefox: 100%.
- Opera: 100%.
- IE9 and up: 100%.
- IE7 & IE8: 100%
Notes:
If you are using no style linking, the browser may apply a false bold to some elements. You will need to over-ride it in your css (see example below). However, this practice is what causes your layout to break when you use no style linking if the web fonts fail to load. This is the main advantage of style linking, you should use at least some style linking even if you only use basic techniques.
/* Example: */
h1 {
font-family: 'MuseoSlab1000';
font-weight: normal;
}
@font-face {
font-family: 'MuseoSlab1000';
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: normal;
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' => '"MuseoSlab100italic", ' . $default_font ,
'font-weight' => 'normal',
'font-style' => 'normal',
),
'syntax' => array(
'font-family' => '"MuseoSlab100italic"',
' src' => 'url("...")',
'font-weight' => 'normal',
'font-style' => 'normal',
),
'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' => '"MuseoSlab300italic", ' . $default_font ,
'font-weight' => 'normal',
'font-style' => 'normal',
),
'syntax' => array(
'font-family' => '"MuseoSlab300italic"',
' src' => 'url("...")',
'font-weight' => 'normal',
'font-style' => 'normal',
),
'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' => '"MuseoSlab500italic", ' . $default_font ,
'font-weight' => 'normal',
'font-style' => 'normal',
),
'syntax' => array(
'font-family' => '"MuseoSlab500italic"',
' src' => 'url("...")',
'font-weight' => 'normal',
'font-style' => 'normal',
),
'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' => 'normal',
'font-style' => 'normal',
),
'syntax' => array(
'font-family' => '"MuseoSlab700"',
' src' => 'url(" ");...',
'font-weight' => 'normal',
'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' => '"MuseoSlab700italic", ' . $default_font ,
'font-weight' => 'normal',
'font-style' => 'normal',
),
'syntax' => array(
'font-family' => '"MuseoSlab700italic"',
' src' => 'url("...")',
'font-weight' => 'normal',
'font-style' => 'normal',
),
'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' => 'normal',
'font-style' => 'normal',
),
'syntax' => array(
'font-family' => '"MuseoSlab900"',
' src' => 'url("...")',
'font-weight' => 'normal',
'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' => '"MuseoSlab900italic", ' . $default_font ,
'font-weight' => 'normal',
'font-style' => 'normal',
),
'syntax' => array(
'font-family' => '"MuseoSlab900italic"',
' src' => 'url("...")',
'font-weight' => 'normal',
'font-style' => 'normal',
),
'font_name' => 'Museo Slab 900 Italic',
'flags' => array(
'regular' => 'no',
'bold' => 'yes',
'italics' => 'yes',
),
'tr_class' => 'fam900',
'font_class' => 'italic',
);
?>