Sunday, March 3, 2024
HomeWeb developmentqueryLocalFonts

queryLocalFonts


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

queryLocalFonts is an async operate that requires consumer 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",
  fashion: "Plain",
}
*/

If you would like to focus on a selected font face, you may also straight 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 an alternative of downloading costly customized fonts. The immediate for permissions looks like it might deter customers from permitting the API, nevertheless. It is so cool that this API exists although!

  • How I Stopped WordPress Comment Spam

    I like nearly each a part of being a tech blogger:  studying, preaching, bantering, researching.  The one half about running a blog that I completely detest:  coping with SPAM feedback.  For the previous two years, my weblog has registered 8,000+ SPAM feedback per day.  PER DAY.  Bloating my database…

  • Write Simple, Elegant and Maintainable Media Queries with Sass

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments