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 collect 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 include 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", type: "Plain", } */
If you would like to focus on a selected font face, you may also instantly question the postscriptName
property:
const canelaFonts = await window.queryLocalFonts({ postscriptNames: ["Canela", "Canela-Bold"], }); // [FontData, FontData, ...]
With queryLocalFonts
you’ll be able to 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!
CSS Animations Between Media Queries
CSS animations are proper up there with sliced bread. CSS animations are environment friendly as a result of they are often {hardware} accelerated, they require no JavaScript overhead, and they’re composed of little or no CSS code. Very often we add CSS transforms to parts by way of CSS throughout…
39 Shirts – Leaving Mozilla
In 2001 I had simply graduated from a small city highschool and headed off to a small city school. I discovered myself within the quaint laptop lab the place the substandard computer systems featured two browsers: Web Explorer and Mozilla. It was this lab the place I fell…
MooTools CountDown Plugin
There are quite a few web sites across the web, RapidShare for instance, that make you wait an allotted period of time earlier than presenting you along with your reward. Utilizing MooTools, I’ve created a CountDown plugin that means that you can simply implement an identical system. The MooTools JavaScript The CountDown class…
[ad_2]