FlowingDev

Fonts, explained: cracking open the tiny software that draws our words

Learn the anatomy of digital fonts, from TTF and WOFF2 to variable axes, and discover how glyphs, kerning, and metadata shape the web's typography.

Try the tool: Font Inspector & Glyph Viewer

In one sentence

Digital fonts aren't just collections of tiny pictures; they are complex, executable software packages filled with vector math, copyright legalese, and hidden substitution rules.

The problem it solves

If you think about it, letters are a wildly subjective concept. When a computer encounters the byte sequence 0x41, it knows that means the letter "A". But what does an "A" look like? Does it have serifs? Is it thick? Is it slanted?

Before digital screens, typography was literal. Printers arranged physical blocks of lead. When the digital era arrived, we needed a way to tell pixels how to draw these shapes. Initially, we used bitmap fonts—literal grids of pixels—but they looked like jagged staircases the moment you tried to scale them up.

In the late 1980s and early 90s, Apple and Microsoft teamed up to build TrueType (TTF) to compete with Adobe's proprietary PostScript (Type 1) format. This kicked off the "font wars." The solution they eventually agreed upon was OpenType (OTF), a format that merged both approaches. Later, to make these files web-friendly, we compressed them into WOFF and WOFF2.

The problem for developers today is that fonts act like black boxes. You write font-family: 'Inter'; in your CSS, but you're flying blind. Does this file actually contain Cyrillic characters? Does the license allow commercial app embedding? Does it support modern variable font axes, or are you just faking a bold weight with CSS? To answer these questions, you need an x-ray machine to peer inside the font file itself, unpack its metadata, and inspect its internal geometry.

How it works under the hood

A modern font file (whether TTF, OTF, or WOFF2) is essentially a highly optimized, binary relational database. It is built on the SFNT container format, which organizes data into distinct "tables," each identified by a 4-letter tag.

The Anatomy of an OpenType Font

When a font inspector parses a file, it reads a central directory to locate these specific tables:

Tag Name What it does
cmap Character to Glyph Mapping The translator. It maps a Unicode value (like U+0041 for "A") to a specific internal Glyph ID.
glyf Glyph Data The actual vector outlines used in TrueType fonts (quadratic Bézier curves).
CFF Compact Font Format The vector outlines used in PostScript-flavored OpenType fonts (cubic Bézier curves).
name Naming Table The metadata: font family, designer, copyright notices, and license URLs.
kern Kerning Rules for spacing specific pairs of letters (e.g., tucking a lowercase 'o' under a capital 'T').
GSUB Glyph Substitution Advanced typography rules, like turning an 'f' and an 'i' into a single 'fi' ligature.

Characters vs. Glyphs

The most fundamental concept to grasp is the separation of characters and glyphs.

  • A character is a semantic concept (Unicode). It means "the idea of a lowercase g".
  • A glyph is a drawing. It is the specific vector shape stored in the font.

One character can map to multiple glyphs (like a standard 'g' and a fancy swash 'g'). Conversely, multiple characters can map to one glyph (like when the characters f and i are replaced by the single ligature glyph fi). The cmap and GSUB tables handle this incredibly complex routing.

Variable Fonts

Historically, if you wanted a Regular, Bold, and Italic typeface, you had to load three separate files. Variable Fonts, introduced as an OpenType extension in 2016, changed the game.

Instead of static outlines, a variable font stores a master outline and a set of mathematical deltas (in the fvar and gvar tables). These deltas define an interpolation "design space" along different axes.

The five standard axes are:

  • wght: Weight (Thin to Black)
  • wdth: Width (Condensed to Expanded)
  • ital: Italic (On or Off)
  • slnt: Slant (Angle of the letters)
  • opsz: Optical Size (Tweaking shapes based on how large the font is displayed)

In CSS, mapping to a variable font axis looks like this:

/* Setting a custom weight of 430 and a slight slant */
h1 {
  font-family: 'MyVariableFont', sans-serif;
  font-variation-settings: 'wght' 430, 'slnt' -5;
}

Web Compression (WOFF2)

WOFF2 (Web Open Font Format 2) isn't a fundamentally new font type; it's just a compression wrapper around a TTF or OTF file. It uses the Brotli compression algorithm, specifically optimized to understand the SFNT table structure, resulting in file sizes roughly 30% smaller than the original WOFF. When the browser downloads a WOFF2, it silently decompresses it back into a standard OpenType font in memory before handing it off to the graphics engine.

Real-world stories

The Invisible Cyrillic Sabotage

A frontend developer was tasked with building a global marketing site using a trendy open-source typeface. Everything looked pixel-perfect in English and Spanish. However, when the localization team fed Russian content into the CMS, the beautiful sans-serif abruptly reverted to a hideous, unstyled Times New Roman fallback.

The developer had assumed that because the font was "modern," it supported all major languages. Inspecting the cmap table revealed the harsh truth: the font only contained ASCII and basic Latin glyphs. The Cyrillic Unicode blocks were entirely empty. The lesson? Never blindly trust a font's language support without checking its glyph coverage firsthand.

The 3 Megabyte Faux-Pas

A design agency handed off an ambitious web project featuring nine different weights of a custom brand font (ranging from Hairline to UltraBlack). The developer diligently loaded all nine .ttf files into the CSS. The result was a catastrophic 3MB payload just for typography, causing huge rendering delays on mobile networks.

By inspecting the font family's source, the developer discovered a single, variable font version (.woff2) of the same typeface. By swapping out the nine static files for the one variable font, they reduced the payload to 120KB. Not only did performance skyrocket, but they were also able to smoothly animate the wght axis on hover states.

The Ransom Note Legalese

A startup was rushing to launch its new iOS app. The UI designer had grabbed a "free" font from a random typography blog to use for the primary buttons. Two days before submission to the App Store, a senior engineer decided to inspect the font's metadata.

Inside the name table, plain as day, was a string explicitly forbidding the embedding of the font in compiled mobile applications without a $5,000 commercial license. Catching this buried EULA (End User License Agreement) saved the startup from potential copyright litigation and a forced app takedown. Fonts are software, and they carry legal baggage right inside their binaries.

Common mistakes and traps

  • Faking bold and italic: If you apply font-weight: bold; or font-style: italic; in CSS, but haven't actually loaded the bold/italic font files, the browser will synthetically smear or skew the regular font. This "faux-bolding" destroys the designer's carefully crafted vector shapes and looks terrible.
  • Ignoring the license: Just because you can download a .ttf file doesn't mean you have the right to serve it over the web or bundle it in an app. Always read the metadata.
  • Shipping bloated subsets: Many popular fonts contain thousands of glyphs for languages you might never serve. Shipping a 400KB font file when you only need English characters is a massive waste of bandwidth. You should inspect the font to see its bloat, then use a subsetting tool to strip out the unused glyphs.
  • Assuming OpenType features are enabled by default: Many fonts contain beautiful ligatures, alternate character styles, or tabular numbers (where every number has the exact same width, perfect for pricing tables). But these are often hidden behind OpenType tags like liga or tnum. If you don't inspect the font to know they exist, you can't activate them using font-feature-settings in your CSS.

Why it belongs on your radar

Typography is the absolute core of the web; up to 90% of a typical website's design is just text. As a developer, treating fonts as magical text-styling dust is a recipe for performance issues and layout bugs.

You need to think about font inspection whenever you are optimizing web performance. Large font files cause Cumulative Layout Shift (CLS) and the dreaded Flash of Unstyled Text (FOUT). By looking under the hood, you can verify if a font is properly compressed (WOFF2), determine if it can be subsetted, or see if it can be replaced entirely by a variable font. Furthermore, anytime you step into internationalization (i18n), you must be able to audit a font's glyph table to ensure the languages you are targeting will actually render.

Mastering the internal logic of fonts elevates you from someone who just types font-family to someone who deeply understands how the browser paints the most important content on the screen.

Go deeper

Theory done. Time to get your hands dirty — 100% in your browser.

Try the tool: Font Inspector & Glyph Viewer