Is font available detect the font is available for the browser with local installed fonts. It is useful for the web fonts, using from server or local file and reducing network traffic.
npm install is-font-available
Detect the local font is available.
import { isFontAvailable } from "is-font-available";
const isHelveticaAvailable = isFontAvailable("Helvetica");
// -> true or false
Using web font when the local font is not available.
async () => {
const isAvailableMyFont = await isFontAvailable("My Font");
if (!isAvailableMyFont) {
const myFont = new FontFace("My Font", `url(${PATH_TO_MY_FONT})`, {
weight: "400",
style: "normal",
});
await myFont.load();
document.fonts.add(myFont);
}
document.body.style.fontFamily = "My Font";
};
https://crayfisher-zari.github.io/is-font-available/examples/
https://crayfisher-zari.github.io/is-font-available/examples/loading.html