queryLocalFonts

By  on  

One of the larger downloads when requesting a webpage are custom fonts. There are many great techniques for lazy loading fonts to improve performance for those on poor connections. By getting insight into what fonts the user has available, we can avoid loading custom fonts. That's where queryLocalFonts comes in -- an native JavaScript function to gather user font information.

queryLocalFonts is an async function that requires user permission via a browser prompt when first executed. queryLocalFonts returns an array of FontData objects which contain information about all available fonts:

const localFonts = await window.queryLocalFonts();

// [FontData, FontData, ...]

/*
{
  family: "Academy Engraved LET",
  fullName: "Academy Engraved LET Plain:1.0",
  postscriptName: "AcademyEngravedLetPlain",
  style: "Plain",
}
*/

If you'd like to target a specific font face, you can also directly query the postscriptName property:

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

// [FontData, FontData, ...]

With queryLocalFonts you can leverage a fonts a user already has instead of downloading expensive custom fonts. The prompt for permissions seems like it would deter users from allowing the API, however. It's so cool that this API exists though!

Recent Features

  • By
    6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

Incredible Demos

  • By
    dwImageProtector Plugin for jQuery

    I've always been curious about the jQuery JavaScript library. jQuery has captured the hearts of web designers and developers everywhere and I've always wondered why. I've been told it's easy, which is probably why designers were so quick to adopt it NOT that designers...

  • By
    MooTools Overlay Plugin

    Overlays have become a big part of modern websites; we can probably attribute that to the numerous lightboxes that use them. I've found a ton of overlay code snippets out there but none of them satisfy my taste in code. Many of them are...

Discussion

  1. Thank u for explaning of the use of queryLocalFonts to optimize web performance by leveraging user’s local fonts. However, do you think the permission prompt might be a significant barrier for widespread adoption of this technique?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!