Home Software Development queryLocalFonts



One of many bigger downloads when requesting a webpage are customized fonts. There are various nice strategies for lazy loading fonts to enhance efficiency for these on poor connections. By getting perception into what fonts the person has obtainable, we are able to keep away from loading customized fonts. That is the place queryLocalFonts is available in — an native JavaScript operate to assemble person font info.

queryLocalFonts is an async operate that requires person 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",
  type: "Plain",

If you would like to focus on a particular font face, you may also immediately question the postscriptName property:

const canelaFonts = await 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 costly customized fonts. The immediate for permissions looks like it could deter customers from permitting the API, nevertheless. It is so cool that this API exists although!



Please enter your comment!
Please enter your name here