This method uses four styles: regular, regular/italic, bold and bold/italic and is supported by all current browsers AND most older browsers. Some browsers support or used to support 'lighter' and 'bolder' but results are not very predictable. This method is the most common, especially if your font family only has 4 styles like many text fonts do.
Pros:
- Good browser support if you still have users on old IE versions.
- Cleaner markup than individual families.
- Degrades well if the fonts fail to load.
Cons:
- Limited to four styles.
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:
*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.
array( 'font-family' => $code_family_name, 'font-weight' => 'normal', 'font-style' => 'normal', ), 'font_name' => 'Museo Slab 500', 'syntax' => array( 'font-family' => $family_name, ' src' => 'url("...")', 'font-weight' => 'normal', 'font-style' => 'normal', ), 'flags' => array( 'regular' => 'yes', 'bold' => 'no', 'italics' => 'no', ), 'tr_class' => 'regular', ); $table_content[] = array( 'code' => array( 'font-family' => $code_family_name, 'font-weight' => 'normal', 'font-style' => 'italic', ), 'font_name' => 'Museo Slab 500 Italic', 'syntax' => array( 'font-family' => $family_name, ' src' => 'url("...")', 'font-weight' => 'normal', 'font-style' => 'italic', ), 'flags' => array( 'regular' => 'yes', 'bold' => 'no', 'italics' => 'yes', ), 'tr_class' => 'regular', 'font_class' => 'italic', ); $table_content[] = array( 'code' => array( 'font-family' => $code_family_name, 'font-weight' => 'bold', 'font-style' => 'normal', ), 'font_name' => 'Museo Slab 700', 'syntax' => array( 'font-family' => $family_name, ' src' => 'url("...")', 'font-weight' => 'bold', 'font-style' => 'normal', ), 'flags' => array( 'regular' => 'no', 'bold' => 'yes', 'italics' => 'no', ), 'tr_class' => 'bold', ); $table_content[] = array( 'code' => array( 'font-family' => $code_family_name, 'font-weight' => 'bold', 'font-style' => 'italic', ), 'font_name' => 'Museo Slab 700 Italic', 'syntax' => array( 'font-family' => $family_name, ' src' => 'url("...")', 'font-weight' => 'bold', 'font-style' => 'italic', ), 'flags' => array( 'regular' => 'no', 'bold' => 'yes', 'italics' => 'yes', ), 'tr_class' => 'bold', 'font_class' => 'italic', ); ?> array( 'font-family' => $code_family_name, 'font-weight' => 'lighter', 'font-style' => 'normal', ), 'font_name' => 'Museo Slab 300', 'flags' => array( 'regular' => 'no', 'bold' => 'no', 'italics' => 'no', ), 'tr_class' => 'lighter', ); $table_content[] = array( 'code' => array( 'font-family' => $code_family_name, 'font-weight' => 'lighter', 'font-style' => 'italic', ), 'font_name' => 'Museo Slab 300 Italic', 'flags' => array( 'regular' => 'no', 'bold' => 'no', 'italics' => 'yes', ), 'tr_class' => 'lighter', 'font_class' => 'italic', ); $table_content[] = array( 'code' => array( 'font-family' => $code_family_name, 'font-weight' => 'normal', 'font-style' => 'normal', ), 'font_name' => 'Museo Slab 500', 'flags' => array( 'regular' => 'yes', 'bold' => 'no', 'italics' => 'no', ), 'tr_class' => 'regular', ); $table_content[] = array( 'code' => array( 'font-family' => $code_family_name, 'font-weight' => 'normal', 'font-style' => 'italic', ), 'font_name' => 'Museo Slab 500 Italic', 'flags' => array( 'regular' => 'yes', 'bold' => 'no', 'italics' => 'yes', ), 'tr_class' => 'regular', 'font_class' => 'italic', ); $table_content[] = array( 'code' => array( 'font-family' => $code_family_name, 'font-weight' => 'bold', 'font-style' => 'normal', ), 'font_name' => 'Museo Slab 700', 'flags' => array( 'regular' => 'no', 'bold' => 'yes', 'italics' => 'no', ), 'tr_class' => 'bold', ); $table_content[] = array( 'code' => array( 'font-family' => $code_family_name, 'font-weight' => 'bold', 'font-style' => 'italic', ), 'font_name' => 'Museo Slab 700 Italic', 'flags' => array( 'regular' => 'no', 'bold' => 'yes', 'italics' => 'yes', ), 'tr_class' => 'bold', 'font_class' => 'italic', ); $table_content[] = array( 'code' => array( 'font-family' => $code_family_name, 'font-weight' => 'bolder', 'font-style' => 'normal', ), 'font_name' => 'Museo Slab 900', 'flags' => array( 'regular' => 'no', 'bold' => 'yes', 'italics' => 'no', ), 'tr_class' => 'bolder', ); $table_content[] = array( 'code' => array( 'font-family' => $code_family_name, 'font-weight' => 'bolder', 'font-style' => 'italic', ), 'font_name' => 'Museo Slab 900 Italic', 'flags' => array( 'regular' => 'no', 'bold' => 'yes', 'italics' => 'yes', ), 'tr_class' => 'bolder', 'font_class' => 'italic', ); ?>