Detect if @font-face is supported by actually trying to render a test icon. This avoids false positives given by Internet Explorer when downloading fonts is disabled in the security settings. Use this if you want to be absolutely sure @font-face is supported, regardless of what the browser tells you.
Works on all browsers that support Javascript and TTF fonts --- and even antique IE by use of an external EOT font file.
Inspired and partly based on the solution by Paul Irish.
Read more about it here.
Because Webkit and Gecko load data-uris asynchronously, there is a small delay before @font-face support can be determined. There are two ways to use the check:
If you call fontFaceCheck.support();
, either a fontfacerender
or a no-fontfacerender
class will be added to the HTML tag.
Pass a callback function as the second parameter to grab the test result:
fontFaceCheck.support( false, function(isSupported) { alert(isSupported) } );
If you want to support IE8 and below, you have to pass the path to the EOT font as the first parameter: fontFaceCheck.support('/path/to/font/')
. Pass false or null and it defaults to "./".