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 accessible, we will keep away from loading customized fonts. That is the place queryLocalFonts is available in — an native JavaScript perform to collect consumer font info.

queryLocalFonts is an async perform that requires consumer permission through 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",
  type: "Plain",
}
*/

If you would like to focus on a selected font face, it’s also possible to immediately 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 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!