### Configuring WebFont.load for Typekit (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/typekit-variations.html

This JavaScript snippet configures the WebFont.load library to load fonts using the Typekit service. It specifies the Typekit kit ID and the API endpoint. This setup initiates the font loading process.

```javascript
WebFont.load({ typekit: { id: 'kitwithgeorgia', api: '/typekit' } });
```

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

### Install Development Dependencies with Bundler Shell

Source: https://github.com/typekit/webfontloader/blob/master/CONTRIBUTING.md

Install the necessary Ruby gems required for development tasks such as running tests and the demo server using Bundler.

```shell
gem install bundler
bundle install
```

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

### Install PhantomJS for Headless Testing Shell

Source: https://github.com/typekit/webfontloader/blob/master/CONTRIBUTING.md

Install PhantomJS, a headless WebKit browser, which is required to run tests in a command-line environment. This command uses HomeBrew.

```shell
brew install phantomjs
```

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

### CSS @font-face Examples for FVD

Source: https://github.com/typekit/webfontloader/blob/master/README.md

Examples demonstrating how Font Variation Descriptions (FVD) like 'n4' and 'i7' map to standard CSS `@font-face` rules for font style and weight.

```css
/* n4 */
@font-face { font-style: normal; font-weight: normal; }

/* i7 */
@font-face { font-style: italic; font-weight: bold; }
```

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

### Example CSS for Custom Fonts (@font-face)

Source: https://github.com/typekit/webfontloader/blob/master/README.md

Provides an example of the CSS `@font-face` declarations that correspond to the custom font families configured in the WebFontLoader `custom` module, including different styles and weights.

```css
@font-face {
  font-family: 'My Font';
  src: ...;
}
@font-face {
  font-family: 'My Other Font';
  font-style: normal;
  font-weight: normal; /* or 400 */
  src: ...;
}
@font-face {
  font-family: 'My Other Font';
  font-style: italic;
  font-weight: normal; /* or 400 */
  src: ...;
}
@font-face {
  font-family: 'My Other Font';
  font-style: normal;
  font-weight: bold; /* or 700 */
  src: ...;
}
```

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

### Run Web Font Loader Demos Shell

Source: https://github.com/typekit/webfontloader/blob/master/CONTRIBUTING.md

Start a local server to browse the demo pages included with the source code. The first command runs the standard demo server, and the second runs it with uncompressed code for debugging.

```shell
rake demo
```

```shell
rake demodev
```

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

### Loading Monotype Fonts with WebFont Loader (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/monotype.html

Configures and initiates the loading of fonts from the Monotype service using the WebFont Loader library. It specifies the project ID required to fetch the correct fonts.

```javascript
WebFont.load({ monotype: { projectId: 'b726c28f-a28a-45be-993f-3db719bacfab' } });
```

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

### Define Progress Logging Function (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/fontdeck.html

Defines a JavaScript function `progress` that appends a message as a list item to an HTML element with the ID 'events' and also logs the message to the browser's console.

```javascript
function progress(message) {
  var output = document.getElementById('events');
  if (output) {
    var e = document.createElement('li');
    e.innerHTML = message;
    output.appendChild(e);
  }
  if (window.console && window.console.log) {
    window.console.log(message);
  }
}
```

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

### Configuring Web Font Loader for Multiple Providers (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/README.md

This example demonstrates the structure of the 'WebFontConfig' object when loading fonts from multiple different providers. Each provider is represented as a property name with the font family or configuration details as its value.

```javascript
WebFontConfig = {
  providerA: 'Family1',
  providerB: 'Family2'
};
```

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

### Load Fontdeck Fonts with WebFontLoader (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/fontdeck.html

Configures and initiates the loading of fonts from Fontdeck using the WebFontLoader library. It specifies the Fontdeck project ID and provides callback functions for various font loading events (loading, active, inactive, fontloading, fontactive, fontinactive).

```javascript
WebFont.load({
  fontdeck: {
    id: 2282
  },
  loading: function() {
    progress('loading');
  },
  active: function() {
    progress('active');
  },
  inactive: function() {
    progress('inactive');
  },
  fontloading: function(fontFamily, fontDescription) {
    progress('fontloading: ' + fontFamily + ' (' + fontDescription + ')');
  },
  fontactive: function(fontFamily, fontDescription) {
    progress('fontactive: ' + fontFamily + ' (' + fontDescription + ')');
  },
  fontinactive: function(fontFamily, fontDescription) {
    progress('fontinactive: ' + fontFamily + ' (' + fontDescription + ')');
  }
});
```

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

### Loading Typekit Font with WebFont Loader (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/typekit.html

Initializes the WebFont Loader library to load a font from the Typekit service using a specific project ID ('bod7grh'). This call triggers the font loading process, which will add classes to the HTML element indicating the font's status.

```javascript
WebFont.load({ typekit: { id: 'bod7grh' } });
```

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

### Styling iFrame CSS

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/monotype-iframe.html

Defines the basic dimensions for an iframe element, setting its height to 100 pixels and width to 100% of its container. This ensures the iframe is visible and occupies the full width.

```css
iframe { height: 100px; width: 100%; }
```

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

### Define progress function (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/events.html

Defines a JavaScript function that updates an HTML list element with messages and logs them to the console, used here to track font loading events.

```javascript
function progress(message) { var output = document.getElementById('events'); if (output) { var e = document.createElement('li'); e.innerHTML = message; output.appendChild(e); } if (window.console && window.console.log) { window.console.log(message); } }
```

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

### Setting up Jasmine Tests for Webfontloader in JavaScript

Source: https://github.com/typekit/webfontloader/blob/master/spec/index.html

This code block initializes the Jasmine test environment, configures various reporters (HTML, Terminal for PhantomJS, BrowserStack), sets a spec filter based on the HTML reporter, and ensures test execution occurs after the window has loaded.

```javascript
CLOSURE_NO_DEPS = true;
goog.require('webfont');
(function () {
  var env = jasmine.getEnv();
  env.updateInterval = 1000;
  var htmlReporter = new jasmine.HtmlReporter(),
    terminalReporter = new jasmine.TerminalReporter({ verbosity: 3, color: true }),
    browserStackReporter = new jasmine.BrowserStackReporter();
  if (/PhantomJS/.test(navigator.userAgent)) {
    env.addReporter(terminalReporter);
  }
  env.addReporter(htmlReporter);
  env.addReporter(browserStackReporter);
  env.specFilter = function (spec) {
    return htmlReporter.specFilter(spec);
  };
  var currentOnload = window.onload;
  window.onload = function () {
    if (currentOnload) {
      currentOnload();
    }
    env.execute();
  };
}());
```

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

### Defining Font Styles - CSS

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/ie-slow-link.html

These CSS rules define two classes, `.serif` and `.droid`, to apply different font families. The `.serif` class uses a generic serif font, while the `.droid` class specifies 'Droid Sans' with a serif fallback.

```css
.serif { font-family: serif; } .droid { font-family: 'Droid Sans', serif; }
```

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

### Load Google Fonts with Web Font Loader (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/event-css-active-multiple.html

Initializes the Web Font Loader to load 'Droid Sans' and 'Tangerine' fonts from Google Fonts. This call triggers the font loading process and subsequent CSS class additions to the `html` element upon successful loading.

```javascript
WebFont.load({ google: { families: ['Droid Sans', 'Tangerine'] } });
```

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

### Loading Typekit Asynchronously with Web Font Loader HTML

Source: https://github.com/typekit/webfontloader/blob/master/README.md

This example shows how to load the Web Font Loader script asynchronously to avoid blocking page rendering. It involves setting a global `WebFontConfig` variable with Typekit configuration before dynamically creating and inserting the script element into the document head.

```HTML
<script>
   WebFontConfig = {
      typekit: { id: 'xxxxxx' }
   };

   (function(d) {
      var wf = d.createElement('script'), s = d.scripts[0];
      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
      wf.async = true;
      s.parentNode.insertBefore(wf, s);
   })(document);
</script>
```

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

### Logging Font Loading Progress (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/custom.html

A helper function that takes a message string and appends it as a list item to an element with the ID 'events'. It also logs the message to the browser's console if available. This function is used by the Web Font Loader callbacks to report the status of font loading.

```JavaScript
function progress(message) {
  var output = document.getElementById('events');
  if (output) {
    var e = document.createElement('li');
    e.innerHTML = message;
    output.appendChild(e);
  }
  if (window.console && window.console.log) {
    window.console.log(message);
  }
}
```

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

### Loading Google Font with WebFont Loader (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/ie-fast-js.html

Initializes the WebFont Loader to fetch the 'Droid Sans' font from a specified Google Fonts API endpoint, enabling non-blocking font loading.

```javascript
WebFont.load({ google: { families: ['Droid Sans'], api: '/fonts/api', } });
```

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

### Defining Serif Font Style (CSS)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/ie-fast-js.html

Defines a CSS rule for the '.serif' class, setting the font family to the generic 'serif' font.

```css
.serif { font-family: serif; }
```

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

### Load fonts and handle events (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/events.html

Uses the WebFont.load method to load 'Droid Sans' and 'Tangerine' from Google Fonts, defining callback functions for different stages of the loading process (loading, active, inactive, fontloading, fontactive, fontinactive). These callbacks utilize the 'progress' function to log events.

```javascript
WebFont.load({ google: { families: ['Droid Sans', 'Tangerine'] }, loading: function() { progress('loading'); }, active: function() { progress('active'); }, inactive: function() { progress('inactive'); }, fontloading: function(fontFamily, fontDescription) { progress('fontloading: ' + fontFamily + ' (' + fontDescription + ')'); }, fontactive: function(fontFamily, fontDescription) { progress('fontactive: ' + fontFamily + ' (' + fontDescription + ')'); }, fontinactive: function(fontFamily, fontDescription) { progress('fontinactive: ' + fontFamily + ' (' + fontDescription + ')'); } });
```

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

### Apply Initial Font Styles (CSS)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/fontdeck.html

Applies specific Fontdeck font families to `h1` and `h2` elements and sets their initial visibility to hidden. This prevents a flash of unstyled text (FOUT) before the custom fonts are loaded.

```css
h1 {
  font-family: 'Fertigo Pro Regular';
  visibility: hidden;
}

h2 {
  font-family: 'Bodoni Display Bold Italic';
  font-weight: bold;
  font-style: italic;
  visibility: hidden;
}
```

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

### Loading Fonts with Web Font Loader CommonJS JavaScript

Source: https://github.com/typekit/webfontloader/blob/master/README.md

This snippet illustrates how to use Web Font Loader as a CommonJS module, typically after installing it via npm. It shows requiring the 'webfontloader' module and then calling the `WebFont.load` method with the desired font configuration.

```JavaScript
  var WebFont = require('webfontloader');

  WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif']
    }
  });
```

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

### Hide/Show Elements Based on Font Loading (CSS)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/event-css-active-multiple.html

Defines CSS rules to initially hide all `h1` elements. It then uses classes added by Web Font Loader (`wf-fontname-weight-style-active`) to make specific `h1` elements visible and apply the correct font family once the corresponding font is loaded.

```css
h1 { visibility: hidden; } html.wf-droidsans-n4-active h1.droid { visibility: visible; font-family: 'Droid Sans'; } html.wf-tangerine-n4-active h1.tangerine { visibility: visible; font-family: 'Tangerine'; }
```

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

### Define Serif Font Style (CSS)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/ie-slow-js.html

Defines a CSS class '.serif' that sets the font-family to 'serif'. This is a basic fallback style used in the example text.

```css
.serif { font-family: serif; }
```

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

### Styling Elements Based on Typekit Font Loading Status (CSS)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/typekit-variations.html

These CSS rules define styles for elements, initially hiding text. They use classes added by WebFont.load (.wf-georgia-i4-active, .wf-georgia-i7-active) to make specific elements visible once the corresponding Typekit font variations (italic and bold italic Georgia) are active.

```css
.georgia p { font-family: 'Georgia'; font-size: 3em; visibility: hidden; } .wf-georgia-i4-active #georgiaitalic { visibility: visible; } .wf-georgia-i7-active #georgiabolditalic { visibility: visible; }
```

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

### Load Google Font and Show Element (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/event-js-active.html

Configures WebFontLoader to load the 'Droid Sans' font from the Google Fonts API. The 'active' callback function is triggered when the font is loaded and active, making the h1 element visible and applying the font.

```javascript
WebFont.load({ google: { families: ['Droid Sans'], api: '/fonts/api' }, active: function() { var h1 = document.getElementsByTagName('h1')[0]; h1.style.visibility = 'visible'; h1.style.fontFamily = 'Droid Sans'; } });
```

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

### Defining Droid Sans Font Style (CSS)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/ie-fast-js.html

Defines a CSS rule for the '.droid' class, setting the font family to 'Droid Sans' with 'serif' as a fallback, intended for elements where the loaded font should be applied.

```css
.droid { font-family: 'Droid Sans', serif; }
```

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

### Make Elements Visible When Fonts Active (CSS)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/fontdeck.html

Defines CSS rules that target `h1` and `h2` elements when WebFontLoader adds specific classes (indicating the respective fonts are active) to the HTML element, making these elements visible.

```css
.wf-fertigoproregular-n4-active h1, .wf-bodonidisplaybolditalic-i7-active h2 {
  visibility: visible;
}
```

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

### Configure Font Loading Timeout in Web Font Loader

Source: https://github.com/typekit/webfontloader/blob/master/README.md

Example showing how to set a custom timeout duration in milliseconds for font loading using the `timeout` parameter within the `WebFontConfig` object. The default timeout is 3000ms.

```javascript
WebFontConfig = {
  google: {
    families: ['Droid Sans']
  },
  timeout: 2000 // Set the timeout to two seconds
};
```

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

### Loading Custom Font with Web Font Loader (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/custom.html

Configures and initiates the Web Font Loader to load a custom font ('ChunkFiveRegular') from a specified CSS file URL. It defines callback functions for various stages of the font loading process (loading, active, inactive, fontloading, fontactive, fontinactive) which utilize the 'progress' function to log events.

```JavaScript
WebFont.load({
  custom: {
    families: ['ChunkFiveRegular'],
    urls : ['http://seanmcb.com/typekit/wfl/stylesheet.css']
  },
  loading: function() {
    progress('loading');
  },
  active: function() {
    progress('active');
  },
  inactive: function() {
    progress('inactive');
  },
  fontloading: function(fontFamily, fontDescription) {
    progress('fontloading: ' + fontFamily + ' (' + fontDescription + ')');
  },
  fontactive: function(fontFamily, fontDescription) {
    progress('fontactive: ' + fontFamily + ' (' + fontDescription + ')');
  },
  fontinactive: function(fontFamily, fontDescription) {
    progress('fontinactive: ' + fontFamily + ' (' + fontDescription + ')');
  }
});
```

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

### Styling Elements Based on Font Loading Status (CSS)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/custom.html

Defines CSS rules to style elements, specifically an h1 and an element with id 'classes', based on the font loading status classes added to the html element by Web Font Loader. Different colors are applied depending on whether the font is loading, active, or inactive.

```CSS
h1 { font-family: 'ChunkFiveRegular'; } /* All Class hooks */ #classes { color: #ddd; } html.wf-loading #classes .Loading, html.wf-active #classes .Active, html.wf-inactive #classes .Inactive, html.wf-chunkfiveregular-n4-loading #classes .ChunkFiveLoading, html.wf-chunkfiveregular-n4-active #classes .ChunkFiveActive, html.wf-chunkfiveregular-n4-inactive #classes .ChunkFiveInactive { color: #000; }
```

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

### Applying Droid Sans Font via CSS

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/google-css.html

This CSS rule targets h1 elements and sets their font-family property to 'Droid Sans'. This requires the 'Droid Sans' font to be available, typically loaded via a web font service or locally. It demonstrates a basic way to apply a specific font style to headings.

```css
h1 { font-family: 'Droid Sans'; }
```

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

### Hide Element Initially (CSS)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/event-js-active.html

Applies CSS to hide the h1 element by default. This ensures the element is not visible until the JavaScript 'active' callback makes it visible after the font is loaded, preventing a flash of unstyled text.

```css
h1 { visibility: hidden; }
```

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

### Loading Google Fonts into Iframe (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/google-iframe.html

Defines a function `loaded` that gets a child iframe, sets its inner HTML with a styled heading, and then uses `WebFont.load` to load the 'Droid Sans' font from a local API endpoint into the context of the child iframe.

```JavaScript
function loaded() {
  var child = frames["child"];
  child.document.body.innerHTML = "<h1 style=\"font-family: 'Droid Sans'\">Hello World. I am Droid Sans.</h1>";
  WebFont.load({
    google: {
      families: ['Droid Sans'],
      api: '/fonts/api'
    },
    context: child
  });
}
```

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

### Loading Monotype Font in iFrame JavaScript

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/monotype-iframe.html

A JavaScript function triggered when the page is loaded. It sets the inner HTML of a child iframe named 'child' and then uses WebFont.load to load a Monotype font project within the context of that iframe. Requires the WebFontLoader library.

```javascript
function loaded() {
 frames["child"].document.body.innerHTML = "<h1>Hello World. I am DIN Next Bold.</h1>";
 WebFont.load({
 monotype: {
 projectId: 'b726c28f-a28a-45be-993f-3db719bacfab'
 },
 context: frames["child"]
 });
 }
```

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

### Styling H1 with Droid Sans Font (CSS)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/event-js-font-active.html

Applies the 'Droid Sans' font family to all H1 elements on the page. This CSS rule ensures that once the font is loaded and active, the H1 text will be rendered using 'Droid Sans'.

```css
h1 {
  font-family: 'Droid Sans';
}
```

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

### Controlling Heading Visibility Based on Font Status (CSS)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/typekit.html

Defines CSS rules to initially hide all h1 elements. It then makes h1 elements visible when the '.wf-futurapt-n7-active' class is applied to an ancestor element (typically the html tag), indicating that the 'futurapt-n7' font variant is active, likely set by the WebFont Loader upon successful loading.

```css
h1 { visibility: hidden; } .wf-futurapt-n7-active h1 { visibility: visible; }
```

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

### Loading Google Font with Web Font Loader (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/event-js-font-active.html

Configures Web Font Loader to load the 'Droid Sans' font from a specified Google Fonts API endpoint. The `fontactive` callback function is triggered when a font becomes active, checking if it's 'Droid Sans' and updating the content of the first H1 element on the page.

```javascript
WebFont.load({
  google: {
    families: ['Droid Sans'],
    api: '/fonts/api'
  },
  fontactive: function(familyName, fontDescription) {
    if (familyName == 'Droid Sans') {
      var h1 = document.getElementsByTagName('h1')[0];
      h1.innerHTML = 'Hello World. I am ' + familyName + ' (' + fontDescription + ')';
    }
  }
});
```

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

### Style headings based on font status (CSS)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/events.html

CSS rules to initially hide h1 elements. Specific rules target h1 elements with classes 'droid' or 'tangerine' when the corresponding font is active (indicated by classes added to the html element by WebFontLoader), making them visible and applying the correct font family.

```css
h1 { visibility: hidden; } .wf-droidsans-n4-active h1.droid { font-family: 'Droid Sans'; font-weight: normal; visibility: visible; } .wf-tangerine-n4-active h1.tangerine { font-family: 'Tangerine'; font-weight: normal; visibility: visible; }
```

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

### Highlight CSS class hooks based on font status (CSS)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/events.html

CSS rules that change the color of list items within the element with id 'classes'. These rules target specific list items based on the font loading status classes added to the html element by WebFontLoader (e.g., wf-loading, wf-active, wf-droidsans-n4-active) to visually indicate the current state.

```css
/* All Class hooks */ #classes { color: #ddd; } html.wf-loading #classes .Loading, html.wf-active #classes .Active, html.wf-inactive #classes .Inactive, html.wf-droidsans-n4-loading #classes .DroidSansLoading, html.wf-droidsans-n4-active #classes .DroidSansActive, html.wf-droidsans-n4-inactive #classes .DroidSansInactive, html.wf-tangerine-n4-loading #classes .TangerineLoading, html.wf-tangerine-n4-active #classes .TangerineActive, html.wf-tangerine-n4-inactive #classes .TangerineInactive { color: #000; }
```

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

### JavaScript Callbacks for Web Font Loader Events

Source: https://github.com/typekit/webfontloader/blob/master/README.md

Configuration object `WebFontConfig` showing the available JavaScript callback functions that are triggered during different stages of the font loading process. Callbacks receive font family name and FVD where applicable.

```javascript
WebFontConfig = {
  loading: function() {},
  active: function() {},
  inactive: function() {},
  fontloading: function(familyName, fvd) {},
  fontactive: function(familyName, fvd) {},
  fontinactive: function(familyName, fvd) {}
};
```

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

### Run Web Font Loader Tests with PhantomJS Shell

Source: https://github.com/typekit/webfontloader/blob/master/CONTRIBUTING.md

Execute the Web Font Loader test suite in a headless WebKit environment using PhantomJS. This command runs the tests from the command line.

```shell
rake test
```

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

### Configure Loading Context for Iframes in Web Font Loader

Source: https://github.com/typekit/webfontloader/blob/master/README.md

Advanced configuration option demonstrating how to specify a target window or iframe context for font loading using the `context` parameter in `WebFontConfig`. Useful for managing fonts across same-origin child windows.

```javascript
WebFontConfig = {
  google: {
    families: ['Droid Sans']
  },
  context: frames['my-child']
};
```

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

### Configuring WebFontLoader for Fonts.com (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/README.md

Configures WebFontLoader to load fonts from Fonts.com using the `monotype` module. Specify your project ID in `projectId` and optionally include `version` for cache busting or `loadAllFonts`.

```javascript
WebFontConfig = {
  monotype: {
    projectId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    version: 12345, // (optional, flushes the CDN cache)
    loadAllFonts: true //(optional, loads all project fonts)
  }
};
```

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

### Loading Custom Fonts Inline (HTML/JavaScript/CSS)

Source: https://github.com/typekit/webfontloader/blob/master/README.md

Demonstrates loading custom fonts when the `@font-face` declarations are already present in an inline `<style>` block or another loaded stylesheet. The `urls` parameter is omitted, and `WebFont.load` is called directly.

```html
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
<script>
  WebFont.load({
    custom: {
      families: ['My Font']
    }
  });
</script>

<style type="text/css">
  @font-face {
    font-family:"My Font";
    src:url("assets/fonts/my_font.woff") format("woff");
  }
</style>
```

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

### Loading Google Fonts Synchronously with Web Font Loader HTML

Source: https://github.com/typekit/webfontloader/blob/master/README.md

This snippet demonstrates how to include the Web Font Loader script synchronously in an HTML page and configure it to load Google Fonts using the `WebFont.load` method. It shows loading specific font families and recommends using an explicit version number for production.

```HTML
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif']
    }
  });
</script>
```

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

### Configuring WebFont Loader with Event Callbacks

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/events-variations.html

Initializes the WebFont Loader library to load the 'Droid Serif' font with specific weights and styles from Google Fonts. It assigns the 'progress' function to various lifecycle event callbacks (loading, active, inactive, fontloading, fontactive, fontinactive) to track the font loading status.

```javascript
WebFont.load({
  google: {
    families: ['Droid Serif:r,i,b,bi']
  },
  loading: function() {
    progress('loading');
  },
  active: function() {
    progress('active');
  },
  inactive: function() {
    progress('inactive');
  },
  fontloading: function(fontFamily, fontDescription) {
    progress('fontloading: ' + fontFamily + ' (' + fontDescription + ')');
  },
  fontactive: function(fontFamily, fontDescription) {
    progress('fontactive: ' + fontFamily + ' (' + fontDescription + ')');
  },
  fontinactive: function(fontFamily, fontDescription) {
    progress('fontinactive: ' + fontFamily + ' (' + fontDescription + ')');
  }
});
```

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

### Loading Google Fonts with Subsets (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/README.md

Shows how to request specific character subsets (e.g., 'latin,greek') for Google Fonts within the `google` module by appending the subset string to the family name after a colon.

```javascript
WebFontConfig = {
  google: {
    families: ['Open Sans Condensed:300,700:latin,greek']
  }
};
```

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

### Subsetting Google Fonts by Text (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/README.md

Illustrates using the `text` parameter within the `google` module to perform character subsetting for Google Fonts, loading only the glyphs required for the specified string.

```javascript
WebFontConfig = {
  google: {
    families: ['Droid Sans', 'Droid Serif'],
    text: 'abcdefghijklmnopqrstuvwxyz!'
  }
};
```

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

### Build Web Font Loader JS File Shell

Source: https://github.com/typekit/webfontloader/blob/master/CONTRIBUTING.md

Compile the Web Font Loader source files into a single JavaScript file using Rake. The first command builds with all modules, while the second builds with only specified modules.

```shell
rake
```

```shell
rake compile['custom google typekit']
```

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

### Loading Google Font via WebFont Loader (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/google.html

Initializes the WebFont Loader to load the 'Droid Sans' font from the Google Fonts service, specifying a custom API endpoint for the font files.

```JavaScript
WebFont.load({ google: { families: ['Droid Sans'], api: '/fonts/api' } });
```

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

### Loading Specific Google Font Weights (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/README.md

Demonstrates how to request specific font weights for Google Fonts within the `google` module by appending the desired weights (e.g., '300,700') to the family name separated by a colon.

```javascript
WebFontConfig = {
  google: {
    families: ['Open Sans Condensed:300,700']
  }
};
```

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

### Loading Google Fonts with WebFont.load and Handling Events (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/event-js-loading.html

Initializes WebFont.load to fetch Google Fonts, specifying a custom API endpoint. Includes 'loading' and 'active' callback functions to modify the document's body color and toggle visibility of loading/content elements based on font loading status.

```javascript
WebFont.load({
  google: {
    families: ['Droid Sans'],
    api: '/fonts/api'
  },
  /*
   * Style the document while fonts are loading.
   */
  loading: function() {
    // The <body> doesn't exist yet, so wait a moment.
    setTimeout(function() {
      document.body.style.color = '#999';
    }, 10);
  },
  /*
   * When fonts are rendered, hide the loading message, show the
   * content, and change the style of the document.
   */
  active: function() {
    var loadingMessage = document.getElementById('loading-message');
    var content = document.getElementById('content');
    loadingMessage.style.display = 'none';
    content.style.display = 'block';
    document.body.style.color = '#000';
  }
});
```

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

### Calculating All Font Style Combinations (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/fontwatchrunner-default-fonts.html

This recursive function takes an array of property names (props) and an object mapping property names to arrays of values (styles). It calculates all possible combinations of the provided style values, returning an array of objects, where each object represents a unique style combination. It uses jQuery's $.extend for object merging.

```javascript
function calculateStyleCombos(props, styles) {
  if (props.length <= 0) {
    return [{}];
  }
  var remainingProps = $.extend(true, [], props);
  var prop = remainingProps.pop();
  var remainingCombos = calculateStyleCombos(remainingProps, styles);
  var combos = [];
  for (var i = 0; i < remainingCombos.length; i++) {
    for (var j = 0; j < styles[prop].length; j++) {
      var combo = {};
      if (styles[prop][j] !== null) {
        combo[prop] = styles[prop][j];
      }
      combos.push($.extend(combo, remainingCombos[i]));
    }
  }
  return combos;
}
```

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

### Configuring Web Font Loader for Typekit (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/README.md

This snippet shows the basic configuration for loading fonts from Typekit using Web Font Loader. It requires setting the 'id' property within the 'typekit' object of the global 'WebFontConfig' variable to your Typekit Kit ID.

```javascript
WebFontConfig = {
  typekit: {
    id: 'xxxxxx'
  }
};
```

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

### Generating Specific Font Style Combinations (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/fontwatchrunner-default-fonts.html

This line calls the calculateStyleCombos function with the defined style properties (font-weight, font-style, text-rendering) and the styles object containing the possible values. The result, an array of all unique style combinations, is stored in the styleCombos variable.

```javascript
var styleCombos = calculateStyleCombos(['font-weight', 'font-style', 'text-rendering'], styles);
```

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

### Configuring WebFontLoader for Fontdeck (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/README.md

Configures WebFontLoader to load fonts from Fontdeck using the `fontdeck` module. Specify your website's Fontdeck ID in the `id` parameter.

```javascript
WebFontConfig = {
  fontdeck: {
    id: 'xxxxx'
  }
};
```

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

### Defining Font Style Combinations for Testing (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/fontwatchrunner-default-fonts.html

This object defines the different CSS font properties and their values that will be combined to create various test cases. It includes font-weight (a range of values), font-style (normal, italic), and text-rendering (null, optimizeLegibility).

```javascript
var styles = {
  'font-weight': [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000],
  'font-style': ['normal', 'italic'],
  'text-rendering': [null, 'optimizeLegibility']
};
```

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

### Loading Google Font using WebFont Loader (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/event-css-inactive.html

Initializes the WebFont Loader library to fetch the 'Droid Sans' font from the Google Fonts API, specifying a custom endpoint for the API request.

```javascript
WebFont.load({ google: { families: ['Droid Sans'], api: '/fonts/api' } });
```

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

### Configuring WebFontLoader for Google Fonts (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/README.md

Configures WebFontLoader to load fonts from Google Fonts using the `google` module. Specify font family names in the `families` array using the standard Google Font API syntax.

```javascript
WebFontConfig = {
  google: {
    families: ['Droid Sans', 'Droid Serif:bold']
  }
};
```

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

### Load Google Font using WebFont Loader (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/event-css-active.html

Initializes the WebFont Loader to load the 'Droid Sans' font from the Google Fonts API, specifying a custom API endpoint.

```javascript
WebFont.load({ google: { families: ['Droid Sans'], api: '/fonts/api' } });
```

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

### JavaScript Function for Logging Progress

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/events-variations.html

Defines a simple JavaScript function to log messages to both a list element on the page and the browser's console. This function is used as a callback for WebFont Loader events.

```javascript
function progress(message) { var output = document.getElementById('events'); if (output) { var e = document.createElement('li'); e.innerHTML = message; output.appendChild(e); } if (window.console && window.console.log) { window.console.log(message); } }
```

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

### Creating Test Case Elements (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/fontwatchrunner-default-fonts.html

This loop iterates through each generated style combination. For each combination, it creates a div element with the class test-case and applies the current style combination using .css(). Inside this div, it appends two span elements, one with class default-fonts-a and one with default-fonts-b, both containing the DEFAULT_TEST_STRING. These test case divs are then added to the element with id test-cases.

```javascript
var testCases = $('#test-cases');
for (var i = 0; i < styleCombos.length; i++) {
  var test = $('<div class="test-case"></div>').css(styleCombos[i]);
  test.append($('<span class="default-fonts-a"></span>').text(webfont.FontWatchRunner.DEFAULT_TEST_STRING));
  test.append($('<span class="default-fonts-b"></span>').text(webfont.FontWatchRunner.DEFAULT_TEST_STRING));
  testCases.append(test);
}
```

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

### Configuring WebFontLoader for Adobe Edge Web Fonts (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/README.md

Configures WebFontLoader to load fonts from Adobe Edge Web Fonts using the `typekit` module. Specify the font IDs in the `id` parameter and the Edge Web Fonts API URL in the `api` parameter.

```javascript
WebFontConfig = {
  typekit: {
    id: 'adamina;advent-pro',
    api: '//use.edgefonts.net'
  }
};
```

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

### Injecting Default Font Stack Styles (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/fontwatchrunner-default-fonts.html

This snippet generates a <style> tag string containing CSS rules that apply the two default font stacks (DEFAULT_FONTS_A and DEFAULT_FONTS_B) to specific CSS classes (.default-fonts-a and .default-fonts-b). It then writes this style tag directly into the document, making the styles available for subsequent elements.

```javascript
var styles = '<style type="text/css">';
styles += '.default-fonts-a {font-family: ' + webfont.FontWatchRunner.DEFAULT_FONTS_A + ';}';
styles += '.default-fonts-b {font-family: ' + webfont.FontWatchRunner.DEFAULT_FONTS_B + ';}';
styles += '</style>';
document.write(styles);
```

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

### Configuring WebFontLoader for Custom Fonts (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/README.md

Configures WebFontLoader to load custom fonts using the `custom` module. Specify font family names in `families` and optionally the stylesheet URL in `urls`. Variations can be specified using FVD notation.

```javascript
WebFontConfig = {
  custom: {
    families: ['My Font', 'My Other Font:n4,i4,n7'],
    urls: ['/fonts.css']
  }
};
```

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

### Measuring Font Widths and Reporting Results (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/fontwatchrunner-default-fonts.html

This code executes after a 500ms delay, allowing the browser to render the elements. It iterates through each .test-case element, finds the widths of the two inner spans (.default-fonts-a and .default-fonts-b), and compares them. It appends the width difference (colored green if different, red if the same) to a comparisons span and tracks if all comparisons passed. Finally, it updates the element with id results to indicate overall success or failure and displays the individual width differences.

```javascript
setTimeout(function() {
  var comparisons = $('<span></span>');
  var allPassed = true;
  $('.test-case').each(function() {
    var a = $(this).find('span').first().width();
    var b = $(this).find('span').last().width();
    comparisons.append($('<span></span>').css('color', a != b ? 'green' : 'red').text(a - b)).append(' ');
    allPassed = allPassed && a != b;
  });
  $('#results').text(allPassed ? 'SUCCESS | ' : 'FAIL | ').append(comparisons);
}, 500);
```

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

### Applying Loaded Font to H1 Elements (CSS)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/google.html

Applies the 'Droid Sans' font, loaded via WebFont Loader, to all <h1> elements on the page.

```CSS
h1 { font-family: 'Droid Sans'; }
```

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

### Loading Typekit Font into iframe (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/typekit-iframe.html

Defines a function `loaded` that accesses an iframe named 'child', sets its inner HTML content, and then uses the WebFont.load method to apply a Typekit font ('bod7grh') to the content within that specific iframe context.

```JavaScript
function loaded() { var child = frames["child"]; child.document.body.innerHTML = "<h1>Hello World. I am Futura PT.</h1>"; WebFont.load({ typekit: { id: 'bod7grh' }, context: child }); }
```

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

### Load Google Font with Blocking (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/ie-slow-js.html

Initializes the WebFont.load method to load the 'Droid Sans' font from Google Fonts, enabling blocking behavior and specifying a custom API endpoint. This is intended to ensure fonts are loaded before page rendering, particularly for older browsers like IE.

```javascript
WebFont.load({
  google: {
    families: ['Droid Sans'],
    blocking: true,
    api: '/fonts/api'
  }
});
```

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

### Styling Iframe Dimensions (CSS)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/google-iframe.html

Sets the height and width of an iframe element to 100px and 100% respectively.

```CSS
iframe { height: 100px; width: 100%; }
```

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

### CSS Rules for Font Visibility on Activation

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/events-variations.html

These rules target specific elements by ID when the corresponding font variation (regular, italic, bold, bold italic) of 'Droid Serif' is active, as indicated by the WebFont Loader's CSS classes on the HTML element. They change the visibility from 'hidden' to 'visible', making the text appear once the font is ready.

```css
.wf-droidserif-n4-active #droidregular {
  visibility: visible;
}
.wf-droidserif-i4-active #droiditalic {
  visibility: visible;
}
.wf-droidserif-n7-active #droidbold {
  visibility: visible;
}
.wf-droidserif-i7-active #droidbolditalic {
  visibility: visible;
}
```

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

### Customizing Test Strings for Custom Fonts (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/README.md

Configures WebFontLoader to use custom test strings for specific font families within the `custom` module. This is useful for fonts with custom subsets or glyphs in the private use unicode area.

```javascript
WebFontConfig = {
  custom: {
    families: ['My Font'],
    testStrings: {
      'My Font': '\uE003\uE005'
    }
  }
};
```

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

### CSS Classes for Web Font Loader Events

Source: https://github.com/typekit/webfontloader/blob/master/README.md

These CSS classes are added to the `html` element by Web Font Loader to indicate the current state of font loading. They allow developers to style elements based on font loading events.

```css
.wf-loading
.wf-active
.wf-inactive
.wf-<familyname>-<fvd>-loading
.wf-<familyname>-<fvd>-active
.wf-<familyname>-<fvd>-inactive
```

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

### CSS Rule for Initial Font Styling

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/events-variations.html

Applies the 'Droid Serif' font family to paragraphs within elements having the class 'droid'. It sets the font size, removes the bottom margin, and initially hides the text using visibility: hidden. This allows the text to become visible only when the specific font variation is active.

```css
.droid p {
  font-family: 'Droid Serif';
  font-size: 2em;
  margin-bottom: 0;
  visibility: hidden;
}
```

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

### Styling H1 Elements with Droid Sans Font (CSS)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/event-js-loading.html

Applies the 'Droid Sans' font family to all <h1> elements on the page. This style is intended to be applied after the font has been successfully loaded by the WebFont Loader.

```css
h1 {
  font-family: 'Droid Sans';
}
```

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

### Loading Google Font with WebFont.js (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/event-css-loading.html

Initializes WebFont.js to load the 'Droid Sans' font from a specified Google Fonts API endpoint. The 'blocking: false' option prevents text from being hidden while the font loads.

```javascript
WebFont.load({ google: { families: ['Droid Sans'], api: '/fonts/api', blocking: false } });
```

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

### Hide/Show H1 based on Font Loading Status (CSS)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/event-css-active.html

Defines CSS rules to initially hide `<h1>` elements and make them visible with the 'Droid Sans' font applied when the `wf-active` class is added to the `<html>` element by WebFont Loader upon successful font loading.

```css
h1 { visibility: hidden; }
html.wf-active h1 { visibility: visible; font-family: 'Droid Sans'; }
```

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

### Styling iframe Dimensions (CSS)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/typekit-iframe.html

Sets the height and width of an iframe element to occupy the full width and a fixed height of 100 pixels.

```CSS
iframe { height: 100px; width: 100%; }
```

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

### Defining Fallback Font for H1 (CSS)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/event-css-inactive.html

Sets the default font family for all `<h1>` elements to a generic sans-serif and removes the default bold weight. This rule provides a fallback style before the custom font is loaded.

```css
h1 { font-family: sans-serif; font-weight: normal; }
```

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

### Load Custom Font in Iframe (JavaScript)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/custom-iframe.html

This JavaScript function is intended to run once the page is loaded. It accesses a child iframe named 'child', sets its inner HTML content, and then uses the WebFont.load function to load a custom font ('ChunkFiveRegular') from a specified CSS URL within the context of the child iframe.

```JavaScript
function loaded() { var child = frames["child"]; child.document.body.innerHTML = "<h1 style=\"font-family: 'ChunkFiveRegular'\">Hello World. I am ChunkFive.</h1>"; WebFont.load({ custom: { families: ['ChunkFiveRegular'], urls : ['http://seanmcb.com/typekit/wfl/stylesheet.css'] }, context: child }); }
```

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

### Style Iframe Dimensions (CSS)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/custom-iframe.html

Applies basic styling to an iframe element, setting its height to 100 pixels and width to 100% of its container. This ensures the iframe has a defined size for displaying content.

```CSS
iframe { height: 100px; width: 100%; }
```

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

### Styling Elements Based on Font Loading Status (CSS)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/event-css-loading.html

Defines CSS rules to control the visibility of loading messages and content based on the font loading status classes (`wf-loading`, `wf-active`) added by WebFont.js. It shows a loading message and hides content while loading, then hides the message and applies the font after loading.

```css
/* Show and style the loading message while fonts are loading */
html.wf-loading #loading-message { display: block; color: #999; }
/* Hide the content while fonts are loading */
html.wf-loading #content { display: none; }
/* Hide the loading message after fonts render */
html.wf-active #loading-message { display: none; }
html.wf-active h1 { font-family: 'Droid Sans'; }
```

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

### Applying Custom Font when Active (CSS)

Source: https://github.com/typekit/webfontloader/blob/master/lib/webfontloader/demo/public/event-css-inactive.html

Targets `<h1>` elements when the `html` tag has the `wf-active` class, which is added by WebFont Loader upon successful font loading. This rule applies the 'Droid Sans' font.

```css
html.wf-active h1 { font-family: 'Droid Sans'; }
```