How to Download Fonts From a Website

Published October 2, 2026 · 11 min read · by the CSS DNA team

Quick answer: Open DevTools, go to the Network tab, filter by Font and reload. Each .woff2 request is a font file you can open in a new tab and save; the page’s @font-face rules list the same URLs. The file is often a partial subset or a variable font, and it needs converting before desktop apps accept it. Having the file gives you no right to use it: Google Fonts are open-licensed, but commercial fonts need a license from the foundry.

Downloading the file doesn’t license the font

Search for “extract font from website” and many results walk you through grabbing the woff2, converting it, installing it, and stop there, as if the download settled the question of whether you can use it. For any commercial typeface, it doesn’t. A foundry sells web licenses and desktop licenses as separate products, and the web license covers the site that bought it. The Designers Foundry’s license terms are typical:

“When licensing a WebFont License, the Font Software supplied is exclusively for use as a WebFont and cannot be used in desktop applications or similar.”

The same terms limit a web license to one domain and make it non-transferable. So the woff2 a site serves you is licensed to that site, for that site. Converting it to TTF for Figma, or self-hosting it on your own project, uses software nobody licensed to you.

Open-source fonts are different. Most of Google Fonts is released under the SIL Open Font License 1.1, with some families under Apache 2.0 and the Ubuntu fonts under their own license, per the google/fonts repository. The OFL lets you use, bundle and redistribute the font, even inside a product you sell. Its main limits are that the font can’t be sold on its own, and a modified version can’t keep a Reserved Font Name without permission. With those, downloading is fine, though as you’ll see below, the file a website serves is rarely the one you want.

Step 1: find out what the font is and where it comes from

Before hunting for files, identify the family and its source. Paste the address into Font Finder and it reports each family, whether it’s from Google Fonts, Adobe Fonts, self-hosted files or the system, the weights declared and which roles use it. That one result often ends the search: a Google Fonts family is a free download from the official site, an Adobe Fonts family comes with a Creative Cloud plan, and a self-hosted commercial family tells you which foundry to buy from. The manual routes are covered in five ways to find what fonts a website uses.

Step 2: find the woff2 in the Network tab

1. Open DevTools (Cmd+Option+I on a Mac, Ctrl+Shift+I on Windows) and switch to Network.
2. Click the Font filter in the request-type bar.
3. Reload the page. Font files load lazily, only when text needs them, so scroll the page too.
4. Click a request to see its full URL under Headers, or right-click it and choose Open in new tab to download it.

Firefox and Safari have the same filter; Firefox labels it “Fonts.” The file names are frequently useless, hashes like UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2, so you need the CSS to know which file is which weight.

Step 3: read the @font-face rules

Every web font arrives through an @font-face rule. In DevTools’ Sources panel, find the stylesheet (or the Google Fonts CSS request in Network) and search it for @font-face. Here’s one block of what Google Fonts sent Chrome for Inter on October 2, 2026:

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

That rule tells you the family, weight, style, file and which characters it covers. Reading dozens of them by eye is slow, so the parser below does it for you.

Why the file you downloaded often isn’t usable

It’s a subset

Big font services split each family by script and use unicode-range so the browser downloads only the slices a page needs. Requesting Inter at weights 400 and 700 from Google Fonts on October 2, 2026 returned 14 @font-face rules: seven slices per weight (cyrillic-ext, cyrillic, greek-ext, greek, vietnamese, latin-ext, latin). Grab only the latin file and you have a font that can’t set “Łódź” or “Ελληνικά.” We decompressed that latin file: it maps 230 characters.

Self-hosted commercial fonts are often trimmed further, sometimes down to the characters on the page, with OpenType features like small caps or alternate figures stripped out. Nothing in the file name tells you.

It’s variable, so “Bold” is the same file

In that same response, the 400 and 700 rules pointed at the identical URL. The file is a variable font with a weight axis from 100 to 900, and the browser picks the weight at render time. Download “the bold one” and you get the same 48,432 bytes as the regular. That’s good news for web use, but some older desktop apps handle variable fonts poorly, and the named instances you expect in a font menu may be missing.

It’s woff2, and desktop apps want TTF or OTF

WOFF2 is a compressed wrapper for the web. macOS Font Book, Windows and most design tools expect TTF or OTF. fontTools converts it:

pip install fonttools brotli

# woff2 → OpenType (TTF or CFF, whichever the file contains)
fonttools ttLib.woff2 decompress Inter-latin.woff2 -o Inter-latin.ttf

# see what you actually have: tables, axes, name records
ttx -l Inter-latin.ttf
ttx -t name -t fvar -o - Inter-latin.ttf

Brotli is the compression WOFF2 uses, so fontTools needs it installed. Google’s woff2_decompress command from the google/woff2 project does the same job if you have it. Going the other way, pyftsubset (also part of fontTools) is how sites produce these slices in the first place:

pyftsubset MyFont.ttf --unicodes="U+0000-00FF" --flavor=woff2 --output-file=MyFont-latin.woff2

Some files are deliberately broken

Some web font files are processed so they only work in the page that serves them: families renamed to something generic, name tables stripped, or features removed. Adobe Fonts delivers its library through web project kits tied to the site owner’s Creative Cloud plan, so the files you see in the Network tab belong to that arrangement and aren’t yours to install.

What you can do with each kind of font

Even when the font is free, download the official release rather than the served file. You get every script, every named instance, the license file and hinting the web slices may lack.

“Steal font from website”: what that search gets wrong

That phrase shows up in our own search data, so here’s the direct answer. Downloading the file is technically trivial and nothing on the page can stop it, because the browser had to receive it to draw the text. Whether you’re allowed to use it is decided by the license, and for commercial type the answer is no until you buy one. The fixes are often cheaper than people expect. Plenty of foundries sell single weights and offer trial fonts for mockups, and many popular commercial faces have a close open-source cousin. Our font identification guide has a section on finding a free alternative to a licensed font.

How to check what you ended up with

Before you design with a downloaded file, spend thirty seconds on it:

• Run ttx -l on the file. An fvar table means variable; no fvar means a single static weight.
• Type your actual copy in it, including accented names, curly quotes and currency symbols. Missing glyphs show up immediately as fallback characters.
• Read the name table (ttx -t name). Copyright and license URL records usually name the foundry and the terms.
• Compare with the rendered page: DevTools’ Computed tab lists Rendered Fonts with a glyph count per family, which tells you whether the page used the file you grabbed.

For the shortlist of extensions that identify fonts on hover, see WhatFont alternatives compared.