Font Fingerprinting: Your Fonts Are Tracking You

What is Font Fingerprinting?

Font fingerprinting is a technique that identifies your browser by detecting which fonts are installed on your system. Each operating system comes with different default fonts. Then users install additional fonts based on their software and preferences. The combination becomes a unique identifier.

The technique was first described in research by the EFF (Electronic Frontier Foundation) in 2010 and has since been found on thousands of websites.

How Font Detection Works

Websites can't directly ask your browser "what fonts do you have?" But they can detect fonts indirectly through several clever techniques:

Method 1: Width Measurement

The most common method. It renders text using a specific font and measures the width. If the font exists, the width matches expected values. If not, a fallback font is used, producing different dimensions.

// Create a span element
const span = document.createElement('span');
span.style.position = 'absolute';
span.style.left = '-9999px';
span.style.fontSize = '72px';
span.innerHTML = 'mmmmmmmmmmlli';

// Set fallback font first
span.style.fontFamily = 'monospace';
document.body.appendChild(span);
const baseWidth = span.offsetWidth;

// Now test target font with monospace fallback
span.style.fontFamily = '"Comic Sans MS", monospace';
const testWidth = span.offsetWidth;

// If widths differ, the font exists
const hasComicSans = (testWidth !== baseWidth);

Method 2: Canvas Rendering

Similar to canvas fingerprinting, but specifically testing how fonts render:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// Draw text with test font
ctx.font = '72px "Arial"';
ctx.fillText('Test', 0, 50);

// Get image data
const arialData = canvas.toDataURL();

// Compare with other fonts
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = '72px "Helvetica"';
ctx.fillText('Test', 0, 50);
const helveticaData = canvas.toDataURL();

// If different, fonts render differently on this system

Method 3: CSS Font Loading API

Modern browsers have a Font Loading API that can be used to check font availability:

// Check if a font is available
document.fonts.check('12px "Segoe UI"'); // true on Windows
document.fonts.check('12px "San Francisco"'); // true on macOS

Why Your Fonts Are Unique

Your font list reveals more about you than you might think:

Operating System

• •Windows: Segoe UI, Calibri, Cambria, Consolas
• •macOS: San Francisco, Helvetica Neue, Menlo, SF Pro
• •Linux: DejaVu Sans, Liberation Sans, Ubuntu

Installed Software

• •Microsoft Office: Adds 50+ fonts (Calibri, Cambria, etc.)
• •Adobe Creative Suite: Hundreds of unique fonts
• •Development Tools: Fira Code, JetBrains Mono, Hack
• •Games: Some games install custom fonts

Language & Region

Different language packs install different fonts:

• •Japanese: MS Gothic, Yu Gothic, Meiryo
• •Chinese: SimSun, Microsoft YaHei, PingFang
• •Korean: Malgun Gothic, Batang
• •Arabic: Traditional Arabic, Simplified Arabic

Statistics & Entropy Data

Most Identifying Fonts

Some fonts are more identifying because fewer people have them:

How to Protect Yourself

1. Browser Settings

Firefox has the best built-in protection:

• •privacy.resistFingerprinting = true in about:config
• •This limits font detection to a standard set of fonts

2. Tor Browser

Tor Browser restricts fonts to a standard list shared by all users. This eliminates font fingerprinting as an identification vector.

3. Anti-Detect Browsers

Anti-detect browsers let you define a specific font list for each profile. You can:

• •Match fonts to your claimed OS
• •Use common font lists that don't stand out
• •Maintain consistent font fingerprints per profile

4. Minimize Installed Fonts

Less practical, but: having fewer installed fonts means less unique fingerprint. Stick to default OS fonts if privacy is paramount.