### Install Font Face Observer with npm

Source: https://github.com/bramstein/fontfaceobserver/blob/master/README.md

This command installs the Font Face Observer library as a dependency using npm, making it available for use in your project. This is the standard method for integrating the library into modern JavaScript development workflows.

```shell
$ npm install fontfaceobserver
```

--------------------------------

### Load Multiple Fonts Individually

Source: https://github.com/bramstein/fontfaceobserver/blob/master/README.md

This example demonstrates how to load several fonts by creating a separate FontFaceObserver instance for each. Each font's load() method is called independently, allowing for individual monitoring and handling of their loading status.

```js
var fontA = new FontFaceObserver('Family A');
var fontB = new FontFaceObserver('Family B');

fontA.load().then(function () {
  console.log('Family A is available');
});

fontB.load().then(function () {
  console.log('Family B is available');
});
```

--------------------------------

### Dynamically Load Multiple Fonts from Data

Source: https://github.com/bramstein/fontfaceobserver/blob/master/README.md

This advanced example shows how to dynamically create and load a large number of fonts from a structured data collection. It iterates through font data, creates observers, and uses Promise.all to manage their loading, including mapping results back to original data and handling potential errors.

```js
// An example collection of font data with additional metadata,
// in this case “color.”
var exampleFontData = {
  'Family A': { weight: 400, color: 'red' },
  'Family B': { weight: 400, color: 'orange' },
  'Family C': { weight: 900, color: 'yellow' },
  // Etc.
};

var observers = [];

// Make one observer for each font,
// by iterating over the data we already have
Object.keys(exampleFontData).forEach(function(family) {
  var data = exampleFontData[family];
  var obs = new FontFaceObserver(family, data);
  observers.push(obs.load());
});

Promise.all(observers)
  .then(function(fonts) {
    fonts.forEach(function(font) {
      console.log(font.family + ' ' + font.weight + ' ' + 'loaded');

      // Map the result of the Promise back to our existing data,
      // to get the other properties we need.
      console.log(exampleFontData[font.family].color);
    });
  })
  .catch(function(err) {
    console.warn('Some critical font are not available:', err);
  });
```

--------------------------------

### Emulate FOUT with Font Face Observer

Source: https://github.com/bramstein/fontfaceobserver/blob/master/README.md

This combined example demonstrates how to prevent Font Of Unstyled Text (FOUT) by applying a CSS class to the document's root element only after a font has loaded. The JavaScript snippet adds the class, and the CSS snippet then applies the desired font family based on that class.

```js
var font = new FontFaceObserver('My Family');

font.load().then(function () {
  document.documentElement.className += " fonts-loaded";
});
```

```css
.fonts-loaded {
  body {
    font-family: My Family, sans-serif;
  }
}
```

--------------------------------

### Load Font with Custom Test String

Source: https://github.com/bramstein/fontfaceobserver/blob/master/README.md

When a font does not contain the default "BESbwy" characters used for testing, a custom string must be provided. This example shows how to pass a specific string, such as Chinese characters, to the load() method to ensure accurate font availability detection.

```js
var font = new FontFaceObserver('My Family');

font.load('中国').then(function () {
  console.log('Font is available');
}, function () {
  console.log('Font is not available');
});
```

--------------------------------

### FontFaceObserver API Reference

Source: https://github.com/bramstein/fontfaceobserver/blob/master/README.md

This section provides a detailed reference for the FontFaceObserver class, including its constructor and the load method. It outlines the parameters, their types, descriptions, and the expected return values for each API component.

```APIDOC
FontFaceObserver Class:
  __init__(fontFamily: string, variation?: object)
    fontFamily: The required font-family name to observe.
    variation: An optional object specifying font variations.
      Properties:
        weight: string | number (e.g., 'normal', 'bold', 400, 700)
        style: string (e.g., 'normal', 'italic', 'oblique')
        stretch: string (e.g., 'normal', 'condensed', 'expanded')
      Default: 'normal' for properties not specified.

  load(testString?: string, timeout?: number): Promise<FontFaceObserver>
    Returns: A Promise that resolves when the font is loaded, or rejects if it fails or times out.
    testString: An optional string to use for font availability testing.
      Default: "BESbwy"
    timeout: An optional number of milliseconds to wait before giving up on font loading.
      Default: 3000 (3 seconds)
```

--------------------------------

### Initialize JavaScript Test Environment with Mocha and Closure Library

Source: https://github.com/bramstein/fontfaceobserver/blob/master/test/index.html

JavaScript code to set up a test environment using Mocha and Closure Library. It includes requiring the fontface.Observer module, configuring Mocha for BDD style, and running tests on window load.

```JavaScript
CLOSURE_NO_DEPS = true; goog.require('fontface.Observer'); mocha.ui('bdd'); expect = weknowhow.expect; window.onload = function () { mocha.run(); };
```

--------------------------------

### Initialize and Load Single Font

Source: https://github.com/bramstein/fontfaceobserver/blob/master/README.md

This snippet demonstrates the basic usage of Font Face Observer to load a single font family with an optional weight. It initializes a FontFaceObserver instance and uses its load() method, which returns a Promise that resolves upon successful font loading or rejects if the font is unavailable.

```js
var font = new FontFaceObserver('My Family', {
  weight: 400
});

font.load().then(function () {
  console.log('Font is available');
}, function () {
  console.log('Font is not available');
});
```

--------------------------------

### Load Multiple Fonts Concurrently with Promise.all

Source: https://github.com/bramstein/fontfaceobserver/blob/master/README.md

To efficiently load multiple fonts simultaneously and wait for all of them to be available, this snippet uses Promise.all. It collects the Promises returned by each font's load() method and resolves only when all specified fonts have successfully loaded.

```js
var fontA = new FontFaceObserver('Family A');
var fontB = new FontFaceObserver('Family B');

Promise.all([fontA.load(), fontB.load()]).then(function () {
  console.log('Family A & B have loaded');
});
```

--------------------------------

### Load a font using Font Face Observer in JavaScript

Source: https://github.com/bramstein/fontfaceobserver/blob/master/README.md

This JavaScript snippet demonstrates how to use Font Face Observer to detect when a custom font, 'My Family', has successfully loaded. It requires Font Face Observer to be imported as a CommonJS module and leverages Promises for asynchronous font loading detection, executing a callback upon completion.

```js
var FontFaceObserver = require('fontfaceobserver');

var font = new FontFaceObserver('My Family');

font.load().then(function () {
  console.log('My Family has loaded');
});
```

--------------------------------

### Loading Custom Fonts with FontFaceObserver in Browser

Source: https://github.com/bramstein/fontfaceobserver/blob/master/test/browser-test.html

This snippet demonstrates how to define a custom font using CSS @font-face and then load it programmatically in a browser using the FontFaceObserver library. It includes success and error handling for font loading, logging messages to the console.

```CSS
@font-face { font-family: test; src: url(assets/sourcesanspro-regular.woff); }
```

```JavaScript
const font = new FontFaceObserver('test'); font.load().then(f => { console.log('Font has loaded'); }).catch(e => { console.error(e); });
```

--------------------------------

### Load Font with Custom Timeout

Source: https://github.com/bramstein/fontfaceobserver/blob/master/README.md

This snippet illustrates how to modify the default font loading timeout. By passing a number of milliseconds as the second argument to the load() method, you can increase or decrease the time Font Face Observer waits before considering a font unavailable.

```js
var font = new FontFaceObserver('My Family');

font.load(null, 5000).then(function () {
  console.log('Font is available');
}, function () {
  console.log('Font is not available after waiting 5 seconds');
});
```

--------------------------------

### Define CSS @font-face Rules for FontFaceObserver Testing

Source: https://github.com/bramstein/fontfaceobserver/blob/master/test/index.html

A collection of CSS @font-face rules used for testing the FontFaceObserver library. These rules define various font families, including those with specific unicode-range properties and some pointing to non-existent files to test error handling.

```CSS
@font-face { font-family: observer-test1; src: url(assets/sourcesanspro-regular.woff) format('woff'), url(assets/sourcesanspro-regular.ttf) format('truetype'); }
@font-face { font-family: observer-test2; src: url(unknown.woff) format('woff'), url(unknown.ttf) format('truetype'); }
@font-face { font-family: observer-test3; src: url(assets/sourcesanspro-regular.woff) format('woff'), url(assets/sourcesanspro-regular.ttf) format('truetype'); }
@font-face { font-family: observer-test4; src: url(assets/subset.woff) format('woff'), url(assets/subset.ttf) format('truetype'); unicode-range: u+0021; }
@font-face { font-family: observer-test5; src: url(assets/subset.woff) format('woff'), url(assets/subset.ttf) format('truetype'); unicode-range: u+4e2d,u+56fd; }
@font-face { font-family: observer-test6; src: url(assets/subset.woff) format('woff'), url(assets/subset.ttf) format('truetype'); unicode-range: u+10ffff; }
@font-face { font-family: observer-test7; src: url(assets/subset.woff) format('woff'), url(assets/subset.ttf) format('truetype'); unicode-range: u+23; }
@font-face { font-family: observer-test8; src: url(assets/sourcesanspro-regular.woff) format('woff'), url(assets/sourcesanspro-regular.ttf) format('truetype'); }
@font-face { font-family: Trebuchet W01 Regular; src: url(assets/sourcesanspro-regular.woff) format('woff'), url(assets/sourcesanspro-regular.ttf) format('truetype'); }
@font-face { font-family: 'Neue Frutiger 1450 W04'; src: url(assets/sourcesanspro-regular.woff) format('woff'), url(assets/sourcesanspro-regular.ttf) format('truetype'); }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.