font-initializer

Another reliable font loader for web apps.

This package is aim to solve the inconsistence behaviour of FontFaceSet API (document.fonts.check always return true, due to a security concern).

How this works

This package will try to render the given font into canvas to detect if the given font(s) load successfully or not.

Feel free to submit PR if you find a better solution or want to fix bugs.

Install

npm i --save font-initializer

API

| fontName (required) | url (required) | testChar (optional) | testFontWeight (optional) | | ------------------- | -------------- | -------- | -------------- | | The font-family name declared under css @font-face | The css font loader | The default render testing character will be 'A'. If your font does not include 'A', you need to pick another render testing character in your font. This always happens in webfont libraries like Font Awesome. | The default render testing font weight will be 'normal' aka 700. If your font does not include normal font weight, you need to pick another render testing font weight. This sometimes happens in webfont libaries. |

import FontInitializer from 'font-initializer';

const loader = new FontInitializer([
  {
    fontName: 'Font Awesome 5 Free',
    url: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css',
    testChar: 0xf641,
    testFontWeight: 900,
  },
  {
    fontName: 'Hack',
    url: 'https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.003/web/hack-subset.min.css',
  }
]);

// async/await supported
await loader.load();

// or Promise style
loader.load()
  .then(() => {
    console.log('All fonts load successfully');
  });

License

MIT