Detects the fonts that are available to the browser on the current system

Usage no npm install needed!

<script type="module">
  import utilFontlist from 'https://cdn.skypack.dev/util.fontlist';



Detects the fonts that are available to the browser on the current system

build analysis code style: prettier NPM


This module uses yarn to manage dependencies and run scripts for development.

To install as an application dependency:

$ yarn add --dev util.fontlist

To build the app and run all tests:

$ yarn run all


The Detector class can be used to determine if the browser supports the requested font. It's based on the algorithm created by Lalit Patel. When the class is instantiated it takes three base fonts (monospace, sans-serif, and serif) and applies them to a base string. The width and height of this rendered string, for each base, is saved. The caller then uses the detect method to request detection of a font by name. The base string is then rendered with the font name of the requested font. The rendered output width and height are compared to the computed base versions from the previous step. If they differ, then we assume that the browser can render that font. If they are the same we assume the browser cannot.

Note that this is meant to be used within a browser environment; it needs the DOM and rendering to work correctly.


Basic Class Usage

import {Detector} from 'util.fontlist';

let detector = new Detector();
if (detector.detect('Consolas')) {
    console.log('Consolas is supported');
} else {
    console.log('Consolas is NOT supported');

Convenience Retrieval

A method is provided with the module named getFontList that will take a list of font names, internally create the detector, check if each given font exists, and return the list of available fonts.

import {getFontList} from 'util.fontlist';

let fontList = getFontList();

// ['Cambria', 'Consolas', ...]

By default this function will use the included file fontlist.json to get a list of possible fonts. This can be overridden in the call to getFontList to use a custom list:

import {getFontList} from 'util.fontlist';

let fontList = getFontList(['Consolas', 'Cambria']);

// ['Cambria', 'Consolas', ...]

This will only search for the two fonts given as a parameter instead of the default list.