Namespace: Fonts:waitForWebfonts

Fonts:waitForWebfonts

Source:

Methods

waitForWebfonts(fonts, fallbackFontNameopt, nullable, timeoutopt, nullable) → {Basic.Deferred.<(Array.<String>|String)>}

Waits for a list of webfonts to load. This includes the fact, that the font is ready to display and renders in the browser's rendering engine and not just a completed request or a loaded resource.

Also works for fonts, that have already been loaded.

Parameters:
Name Type Attributes Default Description
fonts String | Array.<String>

the CSS-names of the fonts to wait for
fallbackFontName String <optional>
<nullable>
 sans-serif

the system font which the page falls back on if the webfont is not loaded
timeout Number <optional>
<nullable>
 5000

timeout in ms after which the call fails and the return value rejects
Source:
Returns:
a Deferred, that resolves once all webfonts are available and rejects when the timeout is reached
Type
Basic.Deferred.<(Array.<String>|String)>
Example
waitForWebfonts(['purr-regular', 'scratch-light'], 'helvetica, sans-serif')
  .then(fonts => {
    document.body.classList.add('webfonts-loaded');
    alert(`${fonts.length} webfonts ready to render`);
  })
  .catch(error => {
    if( error.message === 'timeout' ){
      document.body.classList.add('webfonts-timeout');
    }
  })
;