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

queryLocalFonts is an async operate that requires person permission through a browser immediate when first executed. queryLocalFonts returns an array of FontData objects which comprise 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 particular font face, you can even immediately question the postscriptName property:

const canelaFonts = await window.queryLocalFonts({
  postscriptNames: ["Canela", "Canela-Bold"],

// [FontData, FontData, ...]

With queryLocalFonts you may leverage a fonts a person already has as a substitute of downloading costly customized fonts. The immediate for permissions looks like it could deter customers from permitting the API, nonetheless. It is so cool that this API exists although!

  • From Webcam to Animated GIF: the Secret Behind!
  • Create a CSS Cube

    Create a CSS Dice

    CSS cubes actually showcase what CSS has develop into through the years, evolving from easy coloration and dimension directives to a language able to creating deep, inventive visuals.  Add animation and you have one thing actually neat.  Sadly every CSS dice tutorial I’ve learn is a bit…

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button