{"_id":"@alloc/fontfaceobserver-es","_rev":"2-2aeafd522d7bfd854b3441cd53ef0753","name":"@alloc/fontfaceobserver-es","dist-tags":{"latest":"2.3.2"},"versions":{"2.3.0":{"name":"@alloc/fontfaceobserver-es","version":"2.3.0","description":"Detect if web fonts are available","directories":{"test":"test"},"repository":{"type":"git","url":"git+https://github.com/aleclarson/fontfaceobserver-es.git"},"homepage":"https://fontfaceobserver.com/","main":"dist/fontfaceobserver.mjs","types":"fontfaceobserver.d.mts","keywords":["fontloader","fonts","font","font-face","web font","font load","font events"],"author":{"name":"Bram Stein","email":"b.l.stein@gmail.com","url":"http://www.bramstein.com/"},"license":"BSD-2-Clause","devDependencies":{"mocha":"^10.0.0","mocha-headless-chrome":"^4.0.0","prettier":"^3.2.5","promis":"=1.1.4","sinon":"^14.0.0","tsup":"^8.0.2","typescript":"^5.3.3","unexpected":"^13.0.0"},"scripts":{"build":"tsup"},"_id":"@alloc/fontfaceobserver-es@2.3.0","gitHead":"c77f8b894401796b2ed5848c8d35e63c15f84c8d","bugs":{"url":"https://github.com/aleclarson/fontfaceobserver-es/issues"},"_nodeVersion":"21.5.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-1uu8P6yeY7ug7BWONMDlaBOYfrylb+FGkMbL3x4ialeJTJzpFOiP9D23Ure3QiqtOKTBBK2DFpcrIofGsLdlmg==","shasum":"67c8f3b42ac7d5e1365ac9ae6a7c0728bd58dbc4","tarball":"https://registry.npmjs.org/@alloc/fontfaceobserver-es/-/fontfaceobserver-es-2.3.0.tgz","fileCount":5,"unpackedSize":20780,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDuDhzJiU3+ZNCMHv9mmo8VBVvLqYG5d44EBuROBSnZ6AiEAieMOFsBP9/Iyuy1BAaH4bBi9oy5DC5KVddXo2TXbxsg="}]},"_npmUser":{"name":"aleclarson","email":"alec.stanford.larson@gmail.com"},"maintainers":[{"name":"aleclarson","email":"alec.stanford.larson@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fontfaceobserver-es_2.3.0_1707939769566_0.3433532552301828"},"_hasShrinkwrap":false},"2.3.1":{"name":"@alloc/fontfaceobserver-es","version":"2.3.1","description":"Detect if web fonts are available","directories":{"test":"test"},"repository":{"type":"git","url":"git+https://github.com/aleclarson/fontfaceobserver-es.git"},"homepage":"https://fontfaceobserver.com/","main":"dist/fontfaceobserver.mjs","types":"fontfaceobserver.d.mts","keywords":["fontloader","fonts","font","font-face","web font","font load","font events"],"author":{"name":"Bram Stein","email":"b.l.stein@gmail.com","url":"http://www.bramstein.com/"},"license":"BSD-2-Clause","devDependencies":{"mocha":"^10.0.0","mocha-headless-chrome":"^4.0.0","prettier":"^3.2.5","promis":"=1.1.4","sinon":"^14.0.0","tsup":"^8.0.2","typescript":"^5.3.3","unexpected":"^13.0.0"},"scripts":{"build":"tsup"},"_id":"@alloc/fontfaceobserver-es@2.3.1","gitHead":"97bcc38f3d5d25c0eb9770012636d77eb5c201fa","bugs":{"url":"https://github.com/aleclarson/fontfaceobserver-es/issues"},"_nodeVersion":"21.5.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-VJiIbvs4EHVWqzXdAGHwmxzROPeguR3GEr8UVteDhjin/ctwRnnRzuOV1WuJKUYoeE5tGHerUfD2pDGtWIrbAQ==","shasum":"b95aab4f0f1e3518a8e0688606277d7e90337698","tarball":"https://registry.npmjs.org/@alloc/fontfaceobserver-es/-/fontfaceobserver-es-2.3.1.tgz","fileCount":5,"unpackedSize":20780,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFK8SxmcD+s7xALWP4XAzz/u+HqOm0aTEkICQjLJlMyhAiAIDK2kNnsjYuWE1OqbhxOeYJu9xKAKgdOmKcN9jUXx1w=="}]},"_npmUser":{"name":"aleclarson","email":"alec.stanford.larson@gmail.com"},"maintainers":[{"name":"aleclarson","email":"alec.stanford.larson@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fontfaceobserver-es_2.3.1_1707943841259_0.6178964260935107"},"_hasShrinkwrap":false},"2.3.2":{"name":"@alloc/fontfaceobserver-es","version":"2.3.2","description":"Detect if web fonts are available","directories":{"test":"test"},"repository":{"type":"git","url":"git+https://github.com/aleclarson/fontfaceobserver-es.git"},"homepage":"https://fontfaceobserver.com/","main":"dist/fontfaceobserver.mjs","types":"fontfaceobserver.d.mts","keywords":["fontloader","fonts","font","font-face","web font","font load","font events"],"author":{"name":"Bram Stein","email":"b.l.stein@gmail.com","url":"http://www.bramstein.com/"},"license":"BSD-2-Clause","devDependencies":{"mocha":"^10.0.0","mocha-headless-chrome":"^4.0.0","prettier":"^3.2.5","promis":"=1.1.4","sinon":"^14.0.0","tsup":"^8.0.2","typescript":"^5.3.3","unexpected":"^13.0.0"},"scripts":{"build":"tsup","prepare":"tsup"},"_id":"@alloc/fontfaceobserver-es@2.3.2","gitHead":"c4940a58d20d6eb024f2fdf63734df58099ad936","bugs":{"url":"https://github.com/aleclarson/fontfaceobserver-es/issues"},"_nodeVersion":"21.5.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-Mh8NEIk4ytDK7SlgY4uSNeUoCrR4cBhGye+Xn6WNxzfwc0LhWeG+6xxkMfCQDYbW9HoLrE+YX18w8SxY4krWgA==","shasum":"f7e9a242592937d6171f472160d3a6adc70e4719","tarball":"https://registry.npmjs.org/@alloc/fontfaceobserver-es/-/fontfaceobserver-es-2.3.2.tgz","fileCount":5,"unpackedSize":21246,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkFR7+nItLs83muEN3GfIxrXKvZo7Z4hphtECTLmInYAIhAM+AS6MkoWfOPd3UhmCfRNTTYdZjfbaS8C59E5fkNiAq"}]},"_npmUser":{"name":"aleclarson","email":"alec.stanford.larson@gmail.com"},"maintainers":[{"name":"aleclarson","email":"alec.stanford.larson@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fontfaceobserver-es_2.3.2_1707943915655_0.06970308371241196"},"_hasShrinkwrap":false}},"time":{"created":"2024-02-14T19:42:49.479Z","2.3.0":"2024-02-14T19:42:49.731Z","modified":"2024-02-14T20:51:56.040Z","2.3.1":"2024-02-14T20:50:41.480Z","2.3.2":"2024-02-14T20:51:55.798Z"},"maintainers":[{"name":"aleclarson","email":"alec.stanford.larson@gmail.com"}],"description":"Detect if web fonts are available","homepage":"https://fontfaceobserver.com/","keywords":["fontloader","fonts","font","font-face","web font","font load","font events"],"repository":{"type":"git","url":"git+https://github.com/aleclarson/fontfaceobserver-es.git"},"author":{"name":"Bram Stein","email":"b.l.stein@gmail.com","url":"http://www.bramstein.com/"},"bugs":{"url":"https://github.com/aleclarson/fontfaceobserver-es/issues"},"license":"BSD-2-Clause","readme":"# @alloc/fontfaceobserver-es\n\nAn up-to-date fork of `fontfaceobserver` that has been converted to ESM format and has TypeScript types included.\n\n---\n\n# Font Face Observer [![Build Status](https://travis-ci.org/bramstein/fontfaceobserver.png?branch=master)](https://travis-ci.org/bramstein/fontfaceobserver)\n\nFont Face Observer is a small `@font-face` loader and monitor (3.5KB minified and 1.3KB gzipped) compatible with any webfont service. It will monitor when a webfont is loaded and notify you. It does not limit you in any way in where, when, or how you load your webfonts. Unlike the [Web Font Loader](https://github.com/typekit/webfontloader) Font Face Observer uses scroll events to detect font loads efficiently and with minimum overhead.\n\n## How to use\n\nInclude your `@font-face` rules as usual. Fonts can be supplied by either a font service such as [Google Fonts](http://www.google.com/fonts), [Typekit](http://typekit.com), and [Webtype](http://webtype.com) or be self-hosted. You can set up monitoring for a single font family at a time:\n\n```js\nvar font = new FontFaceObserver('My Family', {\n  weight: 400\n});\n\nfont.load().then(function () {\n  console.log('Font is available');\n}, function () {\n  console.log('Font is not available');\n});\n```\n\nThe `FontFaceObserver` constructor takes two arguments: the font-family name (required) and an object describing the variation (optional). The object can contain `weight`, `style`, and `stretch` properties. If a property is not present it will default to `normal`. To start loading the font, call the `load` method. It'll immediately return a new Promise that resolves when the font is loaded and rejected when the font fails to load.\n\nIf your font doesn't contain at least the latin \"BESbwy\" characters you must pass a custom test string to the `load` method.\n\n```js\nvar font = new FontFaceObserver('My Family');\n\nfont.load('中国').then(function () {\n  console.log('Font is available');\n}, function () {\n  console.log('Font is not available');\n});\n```\n\nThe default timeout for giving up on font loading is 3 seconds. You can increase or decrease this by passing a number of milliseconds as the second parameter to the `load` method.\n\n```js\nvar font = new FontFaceObserver('My Family');\n\nfont.load(null, 5000).then(function () {\n  console.log('Font is available');\n}, function () {\n  console.log('Font is not available after waiting 5 seconds');\n});\n```\n\nMultiple fonts can be loaded by creating a `FontFaceObserver` instance for each.\n\n```js\nvar fontA = new FontFaceObserver('Family A');\nvar fontB = new FontFaceObserver('Family B');\n\nfontA.load().then(function () {\n  console.log('Family A is available');\n});\n\nfontB.load().then(function () {\n  console.log('Family B is available');\n});\n```\n\nYou may also load both at the same time, rather than loading each individually.\n\n```js\nvar fontA = new FontFaceObserver('Family A');\nvar fontB = new FontFaceObserver('Family B');\n\nPromise.all([fontA.load(), fontB.load()]).then(function () {\n  console.log('Family A & B have loaded');\n});\n```\n\nIf you are working with a large number of fonts, you may decide to create `FontFaceObserver` instances dynamically:\n\n```js\n// An example collection of font data with additional metadata,\n// in this case “color.”\nvar exampleFontData = {\n  'Family A': { weight: 400, color: 'red' },\n  'Family B': { weight: 400, color: 'orange' },\n  'Family C': { weight: 900, color: 'yellow' },\n  // Etc.\n};\n\nvar observers = [];\n\n// Make one observer for each font,\n// by iterating over the data we already have\nObject.keys(exampleFontData).forEach(function(family) {\n  var data = exampleFontData[family];\n  var obs = new FontFaceObserver(family, data);\n  observers.push(obs.load());\n});\n\nPromise.all(observers)\n  .then(function(fonts) {\n    fonts.forEach(function(font) {\n      console.log(font.family + ' ' + font.weight + ' ' + 'loaded');\n\n      // Map the result of the Promise back to our existing data,\n      // to get the other properties we need.\n      console.log(exampleFontData[font.family].color);\n    });\n  })\n  .catch(function(err) {\n    console.warn('Some critical font are not available:', err);\n  });\n```\n\nThe following example emulates FOUT with Font Face Observer for `My Family`.\n\n```js\nvar font = new FontFaceObserver('My Family');\n\nfont.load().then(function () {\n  document.documentElement.className += \" fonts-loaded\";\n});\n```\n\n```css\n.fonts-loaded {\n  body {\n    font-family: My Family, sans-serif;\n  }\n}\n```\n\n## Installation\n\nIf you're using npm you can install Font Face Observer as a dependency:\n\n```shell\n$ npm install fontfaceobserver\n```\n\nYou can then require `fontfaceobserver` as a CommonJS (Browserify) module:\n\n```js\nvar FontFaceObserver = require('fontfaceobserver');\n\nvar font = new FontFaceObserver('My Family');\n\nfont.load().then(function () {\n  console.log('My Family has loaded');\n});\n```\n\nIf you're not using npm, grab `fontfaceobserver.js` or `fontfaceobserver.standalone.js` (see below) and include it in your project. It'll export a global `FontFaceObserver` that you can use to create new instances.\n\nFont Face Observer uses Promises in its API, so for [browsers that do not support promises](http://caniuse.com/#search=promise) you'll need to include a polyfill. If you use your own Promise polyfill you just need to include `fontfaceobserver.standalone.js` in your project. If you do not have an existing Promise polyfill you should use `fontfaceobserver.js` which includes a small Promise polyfill. Using the Promise polyfill adds roughly 1.4KB (500 bytes gzipped) to the file size.\n\n## Browser support\n\nFontFaceObserver has been tested and works on the following browsers:\n\n* Chrome (desktop & Android)\n* Firefox\n* Opera\n* Safari (desktop & iOS)\n* IE8+\n* Android WebKit\n\n## License\n\nFont Face Observer is licensed under the BSD License. Copyright 2014-2017 Bram Stein. All rights reserved.\n","readmeFilename":"README.md"}