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!
Welcome to My New Office
My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first…
Create a Clearable TextBox with the Dojo Toolkit
Usability is a key feature when creating user interfaces; it’s all in the details. I was recently using my iPhone and it dawned on my how awesome the “x” icon is in its input elements. No holding the delete key down. No pressing it a…
MooTools, mediaboxAdvanced, and Mexico
The lightbox is probably one of my favorite parts of the Web 2.0 revolution. No more having to open new windows (which can bog down your computer quite a bit) to see a larger image, video, etc. Instead, the item loads right into the…