A website consists of many different assets like images, styles, fonts. You can add an image to a site using the HTML
img tag. Moreover, using stylesheets, you can make your site’s more visually appealing.
font-face, your website will not load a font unless it is being used somewhere using
font-family CSS property. This serves both ways. The font is not downloaded unnecessarily and, in turn, improves your website’s performance. The bad thing is we do not have control between the initial request and the font being rendered.
The CSS Font Loading API provides you with three interfaces:
FontFaceSetLoadEvent. The first one is used to represent a single usable font.
FontFaceSet is an interface for loading font faces and checking their download statuses. The last one is fired whenever a
The first step is representing a font. The following snippet can shed more light on how you can do this:
const myFont = new FontFace(arg1, arg2, arg3);
The first argument is the font family, and the second is the source of the font. The third argument is optional. It is an object where you can define font style, weight stretch, etc.
Now you need to add this font face to the
FontFaceSet. You can do this using the following code snippet:
The last step is loading the font whenever you need it.