Add font faces watcher

[arnvvd]

Add the function fontFacesWatcher to watch font faces used in our website and trigger a global custom event fontsLoaded when all font faces are loaded. This function returns a promise that can be used to execute a script when the fonts are loaded (E.g. add a class on the body; lock/unlock the website loader...). It's a watcher not a loader, the loading process is made by the browser.

To use the function correctly you need to :

• Preload the fonts like this : <link rel="preload" href="assets/fonts/SourceSansPro-Regular.woff2" as="font" type="font/woff2" crossorigin>
• Add the font in your .scss into the $font-faces array: $font-faces: ("Webfont" "SourceSansPro-Regular" 400 normal );
• Then fill the parameter fonts which is an array of font faces objects :

  fontFacesWatcher([
  { fontFamily: "Webfont", style: 400, weight: "normal" },
  ])

  ⚠️ As you can see, I used in my script the font alias Webfont not the real name of the font (SourceSansPro-Regular). The reason is that the document.fonts.check() method uses the font name given in the CSS.

The function fontFacesWatcher trigger a global custom event fontsLoaded. So you can use it in your modules; it's very useful for a scrolling update or a split text, for example. The function also updates the font loaded status on the window object as window.isFontsLoaded, useful with Ajax and the init method of our modules. You can find the implementation in Example.js.

[cloudflare-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	f35a16f
Status:	✅  Deploy successful!
Preview URL:	https://caf75e10.locomotive-boilerplate.pages.dev
Branch Preview URL:	https://feature-fonts-check.locomotive-boilerplate.pages.dev

View logs

[mcaskill]

Superseded by #129