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!
Creating Scrolling Parallax Effects with CSS
Introduction For quite a long time now websites with the so called “parallax” effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a…
Simple Image Lazy Load and Fade
One of the quickest and easiest website performance optimizations is decreasing image loading. That means a variety of things, including minifying images with tools like ImageOptim and TinyPNG, using data URIs and sprites, and lazy loading images. It’s a bit jarring when you’re lazy loading images and they just…
MooTools ASCII Art
I didn’t realize that I truly was a nerd until I could admit to myself that ASCII art was better than the pieces Picasso, Monet, or Van Gogh could create. ASCII art is unmatched in its beauty, simplicity, and … OK, well, I’m being ridiculous; ASCII…
[ad_2]