One of many bigger downloads when requesting a webpage are customized fonts. There are a lot of nice strategies for lazy loading fonts to enhance efficiency for these on poor connections. By getting perception into what fonts the consumer has obtainable, we will keep away from loading customized fonts. That is the place queryLocalFonts
is available in — an native JavaScript operate to assemble consumer font data.
queryLocalFonts
is an async
operate that requires consumer permission by way of a browser immediate when first executed. queryLocalFonts
returns an array of FontData
objects which comprise details about all obtainable fonts:
const localFonts = await window.queryLocalFonts(); // [FontData, FontData, ...] /* { household: "Academy Engraved LET", fullName: "Academy Engraved LET Plain:1.0", postscriptName: "AcademyEngravedLetPlain", fashion: "Plain", } */
If you would like to focus on a selected font face, you may also straight question the postscriptName
property:
const canelaFonts = await window.queryLocalFonts({ postscriptNames: ["Canela", "Canela-Bold"], }); // [FontData, FontData, ...]
With queryLocalFonts
you possibly can leverage a fonts a consumer already has as an alternative of downloading costly customized fonts. The immediate for permissions looks like it might deter customers from permitting the API, nevertheless. It is so cool that this API exists although!
How I Stopped WordPress Remark Spam
I like nearly each a part of being a tech blogger: studying, preaching, bantering, researching. The one half about running a blog that I completely detest: coping with SPAM feedback. For the previous two years, my weblog has registered 8,000+ SPAM feedback per day. PER DAY. Bloating my database…
Introducing MooTools ScrollSidebar
What number of instances are you placing collectively a HTML navigation block or utility block of components that you just want may very well be seen all over the place on a web page? I’ve created an answer that can seamlessly permit you to take action: ScrollSidebar. ScrollSidebar permits you…
Ingredient Place Swapping Utilizing MooTools 1.2
Everyone knows that MooTools 1.2 can do some fairly superior animations. What if we wish to rapidly make two component swap positions with out lots of fuss? Now you possibly can by implementing a MooTools swap() technique. MooTools 1.2 Implementation MooTools 1.2 Utilization To name the swap…