Skip to content

Detect if @font-face is supported by checking if fonts are actually rendered

Notifications You must be signed in to change notification settings

moliver-hemasystems/font-face-render-check

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

44 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Detect if @font-face is supported by checking if fonts are actually rendered

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%