{"id":13447227,"url":"https://github.com/bramstein/fontfaceobserver","last_synced_at":"2025-05-06T02:50:23.377Z","repository":{"id":23831963,"uuid":"27209132","full_name":"bramstein/fontfaceobserver","owner":"bramstein","description":"Webfont loading. Simple, small, and efficient.","archived":false,"fork":false,"pushed_at":"2025-02-18T06:37:15.000Z","size":761,"stargazers_count":4319,"open_issues_count":10,"forks_count":272,"subscribers_count":80,"default_branch":"master","last_synced_at":"2025-04-22T15:49:39.002Z","etag":null,"topics":["font-loading","fontfaceobserver","web-fonts","webfonts"],"latest_commit_sha":null,"homepage":"https://fontfaceobserver.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bramstein.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-11-27T04:34:45.000Z","updated_at":"2025-04-20T09:43:55.000Z","dependencies_parsed_at":"2022-07-12T06:47:03.704Z","dependency_job_id":"0831347f-4427-4cfe-b7db-9e38b70cc6be","html_url":"https://github.com/bramstein/fontfaceobserver","commit_stats":null,"previous_names":[],"tags_count":61,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramstein%2Ffontfaceobserver","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramstein%2Ffontfaceobserver/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramstein%2Ffontfaceobserver/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramstein%2Ffontfaceobserver/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bramstein","download_url":"https://codeload.github.com/bramstein/fontfaceobserver/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252612452,"owners_count":21776253,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["font-loading","fontfaceobserver","web-fonts","webfonts"],"created_at":"2024-07-31T05:01:11.486Z","updated_at":"2025-05-06T02:50:23.362Z","avatar_url":"https://github.com/bramstein.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","others","JavaScript libs"],"sub_categories":[],"readme":"# 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 \u0026 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 \u0026 Android)\n* Firefox\n* Opera\n* Safari (desktop \u0026 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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbramstein%2Ffontfaceobserver","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbramstein%2Ffontfaceobserver","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbramstein%2Ffontfaceobserver/lists"}