Dev.to WebDev 🛠 Dev 👁 0 📖 4 min read

The Fonts app.onepassapps.com Ships: 7 WOFF2 Files, 218,512 Bytes, and the One Your Browser Actually Downloads

I work on OnePassApps, so this is our own product and everything below is a measurement of our own build, taken today from outside the browser and from one tab of the visible Chrome, signed out, with the network cache sw

I work on OnePassApps, so this is our own product and everything below is a measurement of our own build, taken today from outside the browser and from one tab of the visible Chrome, signed out, with the network cache switched off.

On 4 November 2026 at about 21:40 UTC I fetched the stylesheet our home page loads and read the font files it points at as bytes. This post is about the layer I had not looked at before: the seven web fonts the site ships.

The route

The home page links two stylesheets. One is /shell-fallback.css, 3,054 bytes, the static crash fallback that renders when the bundle fails to load. It carries no font rules at all - I checked, there are zero @font-face blocks in it.

The other is /assets/index-B_evf03w.css, fetched with crossorigin and an explicit content type of text/css; charset=utf-8. Uncompressed it is 242,648 bytes. Asked for Brotli it comes back at 40,833 bytes, with the header content-encoding: br. Both times it answers HTTP 200 with the same ETag, "89dd32c00a2e009fc0329349dbbccb70", and the same cache rule: public, max-age=31536000, immutable.

One family, seven files, fourteen declarations

The stylesheet declares 14 @font-face blocks. They are not 14 different fonts: they are 7 unique declarations, each written out twice, and the two copies of each are byte-for-byte identical. Every block names the same family, Inter Variable, the same style, normal, the same weight range, 100 900, the same display mode, swap, and the same format, woff2-variations.

The only thing that differs between the seven is the file it points at and the unicode-range that file covers:

  • inter-vietnamese-wght-normal - 10,252 bytes
  • inter-greek-ext-wght-normal - 11,232 bytes
  • inter-cyrillic-wght-normal - 18,748 bytes
  • inter-greek-wght-normal - 18,996 bytes
  • inter-cyrillic-ext-wght-normal - 25,960 bytes
  • inter-latin-wght-normal - 48,256 bytes
  • inter-latin-ext-wght-normal - 85,068 bytes

That is 218,512 bytes of font on the server, in seven files with seven different SHA-256 digests.

What a browser actually downloads

Here is the part worth knowing: a first-time visitor downloads one of them.

I opened the home page in a fresh tab with the cache disabled and recorded every network request. Exactly one font was fetched:

/assets/inter-latin-wght-normal-Dx4kXJAl.woff2 - HTTP 200, font/woff2, 48,256 bytes, over HTTP/3.

Not the Vietnamese, not the Greek, not the Cyrillic, not even the Latin Extended. The unicode-range on each block is what decides this: the Latin file declares U+0-FF plus a list of punctuation and symbol blocks, so a page whose text is Latin never needs the other six. I repeated the same measurement on the Text Studio route and got the same single font request.

The browser's own font API agrees. document.fonts reports 14 faces - one per @font-face block, including the duplicates - and exactly two of them read as loaded. The other twelve sit at unloaded, waiting for a character they cover to appear on the page. Nothing is preloaded: there is no link rel=preload for a font anywhere in the page, so the font arrives when the CSS is parsed and the text needs it.

So the 218,512 bytes are the catalogue, and 48,256 bytes is what an English page actually pays for.

Why the weights are a range and not seven files

font-weight: 100 900 with a single woff2-variations file is the variable-font path. One file per script, and the browser interpolates the weight inside it - which is why the family is Inter Variable rather than Inter, and why the computed font-family on the body reads "Inter Variable", Inter, system-ui, sans-serif at a 15px body size. There is no static bold file to fetch.

The fallback chain after the family name matters more than it looks. Inter and system-ui are both there, so if the font file is slow the page still paints in the operating system's own UI face and swaps the real family in when font-display: swap allows it.

The cache rule is the same on every file

All seven font files answer HTTP 200 with content-type: font/woff2 and cache-control: public, max-age=31536000, immutable. Each carries its own ETag:

  • inter-vietnamese-wght-normal - "2759cd7f277af7bf9c94ee261d4757f5"
  • inter-greek-ext-wght-normal - "fc33e0f42efd31375bbe011350f72430"
  • inter-cyrillic-wght-normal - "ad67b369dcdfde0a7119965c5f0c2273"
  • inter-greek-wght-normal - "b51265eb3dde6cb9caae832f0d1410dd"
  • inter-cyrillic-ext-wght-normal - "8b5589cbc08333c62904b58b187c1401"
  • inter-latin-wght-normal - "6d816f85b659cca213b3dff1d5fcdfd3"
  • inter-latin-ext-wght-normal - "25e6c942560690c572feb4fbdbca3e"

The names are content-hashed, so a new build gets a new URL and the old one stays valid for a year. Fonts are the one asset class where that pattern is safe to lean on: change a glyph and you change the bytes.

The files are served uncompressed. Asking for Brotli on the Latin subset returns the same 48,256 bytes, because a WOFF2 is already compressed - there is nothing left for the HTTP layer to squeeze.

What the stylesheet says about the family

The design token resolves to one declaration, found once in the file:

--font-sans: "Inter Variable", "Inter", system-ui, sans-serif

and the body inherits it. The Inter name is a second chance for a machine that has Inter installed but not our variable build; system-ui is the last stop.

Limits

One build, one snapshot (4 Nov 2026, about 21:40 UTC), one network, signed out, cache disabled for the browser measurement. I read the seven files the stylesheet names today - if a later build changes the set, these counts change with it. I measured what the browser requested on two routes, the home page and the Text Studio, both in Latin; a page with Cyrillic or Vietnamese text would pull a different subset, and I did not test one. The duplicate declarations are duplicated in the shipped CSS today; whether that is deliberate or a build artefact, I cannot tell from the outside and am not going to guess.

If you want to read the app itself: app.onepassapps.com and the guides.

I work on OnePassApps, the team behind app.onepassapps.com.

📰 Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.