One of many bigger downloads when requesting a webpage are customized fonts. There are lots of nice strategies for lazy loading fonts to enhance efficiency for these on poor connections. By getting perception into what fonts the person has accessible, we will keep away from loading customized fonts. That is the place queryLocalFonts is available in — an native JavaScript perform to assemble person font info.
queryLocalFonts is an async perform that requires person permission by way of a browser immediate when first executed. queryLocalFonts returns an array of FontData objects which include details about all accessible fonts:
const localFonts = await window.queryLocalFonts();
// [FontData, FontData, ...]
/*
{
household: "Academy Engraved LET",
fullName: "Academy Engraved LET Plain:1.0",
postscriptName: "AcademyEngravedLetPlain",
model: "Plain",
}
*/
If you would like to focus on a selected font face, you may also instantly question the postscriptName property:
const canelaFonts = await window.queryLocalFonts({
postscriptNames: ["Canela", "Canela-Bold"],
});
// [FontData, FontData, ...]
With queryLocalFonts you possibly can leverage a fonts a person already has as a substitute of downloading costly customized fonts. The immediate for permissions looks as if it might deter customers from permitting the API, nonetheless. It is so cool that this API exists although!
JavaScript Promise API
Whereas synchronous code is less complicated to observe and debug, async is mostly higher for efficiency and adaptability. Why “maintain up the present” when you possibly can set off quite a few requests without delay after which deal with them when every is prepared? Guarantees are turning into an enormous a part of the JavaScript world…
Being a Dev Dad
I get requested a great deal of questions each day however I am all the time shocked that they are not often questions on code and even tech — most of the questions I get are extra about non-dev stuff like what my workplace is like, what software program I exploit, and oftentimes…
MooTools Gone Wild: Aspect Flashing
In the event you’re like me and lay awake in mattress at night time, you have flipped on the TV and seen the commercials: misguided, attention-starved faculty ladies fueled by alcohol ruining their futures by flashing lame camera-men on Spring Break. Why do they do it? Consideration…
Show Photographs as Grayscale with CSS Filters
CSS filters aren’t but broadly supported however they’re certainly spectacular and a contemporary want for net imagery. CSS filters assist you to modify the show of photos in a wide range of methods, a type of methods being displaying photos as grayscale. Doing so requires the…