In this video, I walk you through the demo, explain some style linking methods, and test various methods in IE.
Have you ever wondered how reliable style linking is? Many of us don't have definitive ways to test every browser/operating system combination and browser simulators aren't reliable either, especially with web fonts. Even if you did have reliable ways to test, the fake bold and italics that the browser applies can be close enough that it's hard to tell if the linked fonts are being downloaded and used or if the browser is just faking it. This demo will show where style linking is reliable and where it fails. As you will be able to see, we have reached a point where we can reliably use style linking in all modern browsers and even old browsers with the exception of IE8 and lower.
Are You A Newbie?
If you are new to web fonts, this demo will help you unlock the control that style linking gives you over your typography in your website. View my examples and accompanying code to grasp proper techniques. Below each demo, the code used to build the demo is displayed.
Seasoned Programmer?
If you are familiar with style linking, this demo displays the font family Museo Slab style linked using every method I could think of. Use the navigation across the top to learn more and view the demos. You can view it in different browser, and disable the web fonts to see how the web fonts degrade. If you didn't have confidence in style linking before, you will now. You will see that style linking works reliably in all major modern browsers.
About The Demo
The demo is a bare bones set of pages to demonstrate how to link font family styles and allows you to test each method in any browser. It's not meant to be pretty.
The Trick
Because it is so difficult to tell a fake style from the real thing, I modified the "plus" symbol inside all the fonts, replacing it with a unique character that will clearly identify the fonts style.
For example this code:
<em>+</em>
Will actually display my new glyph:
+
If web fonts AREN'T working, you will see a "plus" symbol. If they ARE working, you will see a single character 500i that indicates that it is the 500 weight italic version of the webfont. Each font has it's own unique character.
Another example, since I am using Museo 900 for the headers, this code:
<h1>+ and <em>+</em></h1>
Will actually display like this:
+ and +
In each demo, I purposefully use the plus sign so we can absolutely identify which font each browser loaded.
Font Internals
If you are targeting IE8 and lower, style linking relies on some internal font data. In each demo, I list the relevant data about the font so you can experiment with how the browser reacts. All modern browsers seem to ignore this data, it is only relevant to older versions of IE. To test it out, use our test page. Some fonts have the wrong data internally, this is especially possible with free fonts. You may try running the fonts through our web font generator on Font Squirrel. Often times it detects abnormalities and optimizes them.
Summary
Style linking is widely supported in all modern browsers, and if it is done properly, it degrades relatively well in older IE browsers.
This Page's Code:
At the bottom of each demo/page the actual css is shown for you to study if needed. This page uses numeric style linking.