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!
Facebook Open Graph META Tags
It’s no secret that Facebook has become a major traffic driver for all types of websites. Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly. And of course there are Facebook “Like” and “Recommend” widgets on every website. One…
CSS vs. JS Animation: Which is Faster?
How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point…
Source link
