queryLocalFonts

Probably the most better downloads when soliciting for a webpage are customized fonts. There are lots of nice ways for lazy loading fonts to reinforce efficiency for the ones on deficient connections. Through getting perception into what fonts the person has to be had, we will be able to keep away from loading customized fonts. That is the place queryLocalFonts is available in — an local JavaScript serve as to assemble person font data.

queryLocalFonts is an async serve as that calls for person permission by means of a browser urged when first accomplished. queryLocalFonts returns an array of FontData items which include details about all to be had fonts:

const localFonts = watch for window.queryLocalFonts();

// [FontData, FontData, ...]

/*
{
  circle of relatives: "Academy Engraved LET",
  fullName: "Academy Engraved LET Undeniable:1.0",
  postscriptName: "AcademyEngravedLetPlain",
  taste: "Undeniable",
}
*/

If you need to focus on a selected font face, you’ll be able to additionally immediately question the postscriptName assets:

const canelaFonts = watch for window.queryLocalFonts({
  postscriptNames: ["Canela", "Canela-Bold"],
});

// [FontData, FontData, ...]

With queryLocalFonts you’ll be able to leverage a fonts a person already has as an alternative of downloading pricey customized fonts. The urged for permissions turns out adore it would deter customers from permitting the API, then again. It is so cool that this API exists even though!