#Webfont loader install
#Webfont loader update
#Webfont loader code

For example, Droid Sans becomes droidsans. Spaces and underscores are removed from the name, and all characters are converted to lower case. The placeholder will be replaced by a sanitized version of the name of each font family. The following classes are set on the html element.

fontinactive - This event is triggered if the font can't be loaded.ĬSS events are implemented as classes on the html element.

fontactive - This event is triggered once for each font that renders.

fontloading - This event is triggered once for each font that's loaded.

inactive - This event is triggered when the browser does not support linked fonts or if none of the fonts could be loaded.

active - This event is triggered when the fonts have rendered.

loading - This event is triggered when all fonts have been requested.

It gives you notifications of the font loading sequence in both CSS and JavaScript. Web Font Loader provides an event system that developers can hook into.

#Webfont loader code

When using the asynchronous approach, you must define the global variable WebFontConfig before the code that loads the Web Font Loader (as in the example above). It defines which fonts to load from each web font provider and gives you the option to specify callbacks for certain events.

The Web Font Loader configuration is defined by a global variable named WebFontConfig, or passed directly to the WebFont.load method.

#Webfont loader install

Just npm install webfontloader and then require it in your code. Web Font Loader is also available on npm as a CommonJS module. The browser will wait for the script to load before continuing to load the rest of the content, FOUT is avoided. The FOUT can be more easily avoided when loading the Web Font Loader synchronously, as it will automatically set the wf-loading class on the HTML element as soon as Webfont.load has been called. Be aware that if the script is used asynchronously, the rest of the page might render before the Web Font Loader is loaded and executed, which can cause a Flash of Unstyled Text (FOUT). Using the Web Font Loader asynchronously avoids blocking your page while loading the JavaScript. Var wf = d.createElement( 'script'), s = d.scripts For example, to load Typekit fonts asynchronously, you could use the following code. It is also possible to use the Web Font Loader asynchronously. Web Font Loader is also available on the jsDelivr & CDNJS CDNs.

#Webfont loader update

You can manually update the Web Font Loader version number in the url when you want to adopt a new version. For performance reasons, we recommend using an explicit version number (such as 1.6.26) in urls when using the Web Font Loader in production. It will always load the latest 1.x version, but it also has a shorter cache time to ensure that your page gets updates in a timely manner. Note that the version in this url is less specific. Īlternatively, you can link to the latest 1.x version of the Web Font Loader by using as the script source. For example, you could load fonts from Google Fonts using the Web Font Loader hosted on Google Hosted Libraries using the following code. To use the Web Font Loader library, just include it in your page and tell it which fonts to load. It is co-developed by Google and Typekit. The Web Font Loader is able to load fonts from Google Fonts, Typekit,, and Fontdeck, as well as self-hosted web fonts. Link to the pixi demos coming soon.Web Font Loader gives you added control when using linked fonts via It provides a common interface to loading fonts regardless of the source, then adds a standard set of events you may use to control the loading experience. They are there, just trust them! Call upon thee by their family name or font name (check the CSS file you loaded for those) or check the resources object with the name you gave your font in the loader.

The old method works too, you can use Transfonter, FontSquirrel and many other websites can convert a regular font into a fully functional Webfont. Starting from version 1.0.0 you can add them to your Loader with a name and they just work! Then in your code do this once before using Loader import ) I only have a. Massive thanks to and for his guidance on writing PixiJS plugins. Supported formats: css, ttf, otf, woff, and woff2! This leverages plugin relies heavily on Promises and the FontFace API Add support for webfonts to PixiJS's Loader.