Detect if @font-face is supported by checking if fonts are actually rendered
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dev
README.md
example.html
fontfacecheck-min.js
fontfacecheck.js
pixelambacht.eot

README.md

@Font-face render check

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.

Usage

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:

Let it add a class to the HTML tag...

If you call fontFaceCheck.support();, either a fontfacerender or a no-fontfacerender class will be added to the HTML tag.

...or catch the result in a variable

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 "./".