Add support for the CSS Font Loading API

mcaskill commented 1 year ago

This pull request is based on #128. The following description was originally posted as a comment.

After some additional reading on the CSS Font Loading API and I've come up with a working example that uses Promises instead of events for a more flexible solution.

With the use of Promises, modules wait on the FontFace's they need. This way, they react accordingly if "eager loaded" or "lazy loaded".

Note that the code may not be production ready. Requires further testing across use cases and environments.

References

CSS Font Loading API, MDN, 2022
Link types: preload, MDN, 2022
Optimize WebFont loading, Web Dev, 2019–2020
Should I Use JavaScript to Load My Web Fonts?, Filament Group, 2018
The importance of @font-face source order when used with preload, Nooshu, 2021

Added

Multiple "Source Sans 3" fonts to test many FontFace entries.

Changed

Removed quotes from font family name to avoid them being included in FontFace.family value.

Notes

Replaces hidden <span> elements with FaceFace.load() and FaceFace.loaded to eagerly load fonts.
Fonts are eagerly using custom loadFonts() (see 'app.js').
Acting upon loaded fonts is done using whenReady() (see 'Example.js').

Todo

[ ] Remove usage of Example from modules.js and index.html.

mcaskill commented 1 year ago

Outcome from meeting on 2022-10-05

Status: Approved by all.

cloudflare-pages[bot] commented 1 year ago

Deploying with Cloudflare Pages

Latest commit:	`98957eb`
Status:	✅ Deploy successful!
Preview URL:	https://d30919ff.locomotive-boilerplate.pages.dev
Branch Preview URL:	https://feature-eager-fonts.locomotive-boilerplate.pages.dev

View logs

locomotivemtl / locomotive-boilerplate