https://github.com/houkanshan/fontonload

Cross browser detecting web font loading, without checking by timer (setTimeout / setInterval).
https://github.com/houkanshan/fontonload

Last synced: about 2 months ago
JSON representation

Cross browser detecting web font loading, without checking by timer (setTimeout / setInterval).

• Host: GitHub
• URL: https://github.com/houkanshan/fontonload
• Owner: houkanshan
• License: mit
• Created: 2014-12-08T04:35:31.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2015-10-07T17:51:18.000Z (about 9 years ago)
• Last Synced: 2024-10-05T07:47:36.445Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 494 KB
• Stars: 16
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# fontonload

[![Build Status](https://magnum.travis-ci.com/houkanshan/fontonload.svg?token=jqtussTxt3duXbPxyhA7&branch=master)](https://magnum.travis-ci.com/houkanshan/fontonload)

Cross browser detecting web font loading, without checking by timer (setTimeout / setInterval).

[中文](http://houkanshan.github.io/posts/2014/12/17/fontonload/)

## Usage

1. Patch your font with the `patch.ttf` file,

  which include a blank graph (non-spacing and no-marking)

  on [U+FFFD](http://www.fileformat.info/info/unicode/char/fffd/index.htm)

2. Declare the `@font-face` in your CSS.

3. Load the library.

```javascript

FontOnload('fontname', {

  eotFile: './fonts/fontname.eot',

  success: function() {

  },

  fail: function(e) {

    console.log(e.name)

  }

})

```

You can check the [demo page](http://houkanshan.github.io/fontonload/demo)

to see if it works.

## How it Works

1. It uses the [CSS Font Loading Module](http://dev.w3.org/csswg/css-font-loading/) when available.

2. For browsers which can auto trigger `scroll` event. It uses a scroller element,

which contains an `U+FFFD` character, to detect the font loading.

When your patched font load,

the height and width of the detection element will become 0,

that will trigger a `scroll` event.

It's similar to *smhn*'s [article](http://smnh.me/web-font-loading-detection-without-timers/),

but more simple (no embedded font) in detection.

3. For IE 6 – 9, these browsers won't trigger a `scroll` event after height/width decreased.

But fortunately I found that they don't have FOUT if the font file is in cache,

so the code just preload the eot font to make sure the font file is in cache.

The preload works is make by iframe, and detect the loading by it's `onload` event. 

(@font-face will block `onload` event)

4. It exclude the browser which don't support web font

(BlackBerry 5/6, Opera Mini, Windows Phone 7/7.5)

Briefly, it works thanks to these 3 browser behaviors:

1. Modern browsers' `document.fonts.load`

2. Other browsers' `scroll` event when element size decrease

3. IE 6 – 9 block `window.onload` event until @font-face loaded & `iframe.onload` being detectable

## License

[MIT License](http://en.wikipedia.org/wiki/MIT_License)