Detect which font your system has cherry-picked from font-family.
- npm:
npm install detect-font --save
Usage
import { detectFont, supportedFonts } from 'detect-font';
const element = document.querySelector('...');
// Yield the first font that is supported on the element.
console.log(detectFont(element));
// Otherwise display all valid fonts for the element.
console.log(supportedFonts(element));When a typeface is encountered — monospace, sans-serif or serif — then it will be returned and the font discovery will not continue. For example in the following case monospace will be returned — the fonts will not be considered:
.example {
font-family: monospace, "Times New Roman", Arial;
}In the unlikely event that a valid font cannot be determined detectFont will yield false — an empty array will be returned by supportedFonts.
Found a problem? Please raise an issue.
Links
- Experiment from https://www.reddit.com/r/javascript/comments/46k23v/how_to_get_the_computed_fontfamily/
- Thanks to https://www.kirupa.com/html5/detect_whether_font_is_installed.htm
