Font

Every device and browser combination can have slight differences in the list and versions of fonts installed. Font browser fingerprinting capitalizes on this to generate a unique or semi-unique profile of a visitor based on the fonts detected on their device. This information can then be used for targeted advertising, user profiling, or even evading privacy measures.

Implementing Font Browser Fingerprinting in JavaScript#

Here’s a simplified implementation to detect available fonts:

const testFont = (font) => {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  const referenceText = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
  context.font = '72px monospace';
  const baselineSize = context.measureText(referenceText).width;

  context.font = `72px '${font}', monospace`;
  const testSize = context.measureText(referenceText).width;

  return baselineSize !== testSize;
};

const detectFonts = () => {
  const fontList = ['Arial', 'Verdana', 'Courier New', /*... more fonts ...*/];
  const availableFonts = fontList.filter(testFont);

  return availableFonts;
};

console.log(detectFonts());

This code works by drawing text to a canvas element and measuring its width. If the width changes when a specific font is applied, it’s likely that the font exists on the user’s system.

Bypassing Font Browser Fingerprinting#

By default, a given combination of operating system / browser will produce the same results on two different devices. Font fingerprinting is not an issue on low-scale scraping done on consumer hardware. However it can be on high-scale web scraping projects. In this case, spoofing is best way to bypass it, has most anti-bot solutions won’t verify this data with CSS or Canvas Fingerprinting.