fontfaceobserver
fontfaceobserver copied to clipboard
Is this library redundant with "font-display"?
Now that browser support for font-display
is pretty good which is supported in Chrome, Firefox, Safari, iOS (though no IE11 + Edge) - would you still recommend to use this library?
It would be good if the docs could comment on when this library is useful compared to font-display
- personally I've had trouble implementing this library (with local storage caching) and still cannot prevent FOUT, but font-display works perfectly.
my personal intuition is that combining:
-
rel=preload
http header for each of the fonts you want to preload (or<link rel=preload>
early in the markup if modifying headers is not possible) -
font-display
in your css
will yield better results for browsers that correctly implement the web standards, but "better" is subjective and probably depends a lot on your personal preferences and use cases.
I feel like FFO will produce a more consistent experience across browsers, but it's definitely a bit more complicated to use and adds a small hit in terms of script parsing and execution time.
(these are just feelings, no real world examples!)
Thanks for the comment. It's also worth noting there is an offical draft spec for promise-based font loading, maybe this library could act as some polyfill.
Support is pretty decent:
https://developer.mozilla.org/en-US/docs/Web/API/FontFace/load
One major advantage of FFO just occurred to me - you can wait for all the fonts you care about to load before applying any of them. If you have a lot of fonts, it seems beneficial from a user perspective to do one big sweep of the document vs. adding them incrementally as they load in (depending I guess on personal preference/design direction).
I think you could code this yourself, especially with that FontFace.load
method you mention, but at that point it seems like you've lost the ability to take advantage of rel=preload
and you're scripting a somewhat complicated solution, so maybe just better to go with the tried and true FFO library.
I came to see if I could learn more about this now that Adobe Fonts has a font-display: swap;
option. I was thinking about the sessionStorage
technique that I'm using with Font Face Observer and realized that I'm not sure how font-display: swap
works with browser caching.
I'm curious if there are additional cases beyond browser compatibility when it's beneficial to use this library instead of font-display: swap
, and also if there are ever cases where it's worth using both?