https://github.com/smnh/onfontsload

Javascript utility function that notifies when requested fonts are loaded and rendered.
https://github.com/smnh/onfontsload

Last synced: about 2 months ago
JSON representation

Javascript utility function that notifies when requested fonts are loaded and rendered.

• Host: GitHub
• URL: https://github.com/smnh/onfontsload
• Owner: smnh
• Created: 2013-03-23T17:07:11.000Z (almost 12 years ago)
• Default Branch: gh-pages
• Last Pushed: 2015-09-08T13:40:26.000Z (over 9 years ago)
• Last Synced: 2024-10-14T03:43:18.657Z (3 months ago)
• Language: JavaScript
• Size: 125 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
This project is not supported anymore, please refer to [FontLoader](https://github.com/smnh/FontLoader).

#onFontsLoad

Javascript utility function that notifies when specific font families are loaded and rendered. It can be useful when you want to show alternative content before specific fonts are loaded. Оr when you need to get final dimensions of non-size-fixed containers that contain font families, as dimension of these containers may change after fonts are loaded.

##Usage

First define some fonts in your page:

```html

	@font-face {

		font-family: DeliciousRoman;

		src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);

		font-weight:400;

	}

	.myFont {

		font-family: DeliciousRoman, Helvetica, Arial, sans-serif;

	}

```

Then include the onFontsLoad.js

```html

```

And finally, add following function passing it array with all font-families you want to load and a callback function which will be executed once all fonts are loaded:

```javascript

onFontsLoad(["DeliciousRoman"], function(error) {

	if (!error) {

		// do something here, for example hide loading indicator and show elements with loaded font-families.

	} else {

		// error.notLoadedFontFamilies is an array of font-families that didn't loaded in specific time interval.

		console.log(error.message)

	}

});

```