How do I download/extract font from chrome developers tools?

Downloading and Extracting Fonts from Chrome DevTools

Learn how to identify, inspect, and download web fonts directly from Google Chrome's Developer Tools for analysis or local use.

Web fonts are an integral part of modern web design, often loaded dynamically by websites. While browsers render these fonts seamlessly, you might occasionally need to inspect, analyze, or even download them for various reasons, such as debugging styling issues, understanding font licensing, or simply wanting to use a specific font locally. Google Chrome's Developer Tools provide powerful capabilities to achieve this, though the process isn't always immediately obvious.

Understanding How Browsers Handle Fonts

When a web page loads, the browser parses the CSS to identify which fonts are required. If these fonts are not locally available on the user's system, the browser sends requests to the server to download the font files. These files are typically in formats like WOFF, WOFF2, TTF, or OTF. Chrome DevTools allows you to intercept and inspect these network requests, providing a gateway to the font files themselves.

sequenceDiagram
    participant User
    participant Browser
    participant WebServer

    User->>Browser: Navigates to website
    Browser->>WebServer: Request HTML/CSS
    WebServer-->>Browser: Send HTML/CSS
    Browser->>Browser: Parse CSS, identify fonts
    alt Font not local
        Browser->>WebServer: Request Font File (e.g., .woff2)
        WebServer-->>Browser: Send Font File
    end
    Browser->>Browser: Render page with fonts
    User->>Browser: Inspect fonts via DevTools

Sequence diagram illustrating how browsers request and load web fonts.

Locating Font Files in DevTools

The primary method for finding font files involves using the Network tab in Chrome DevTools. This tab logs all network activity, including requests for stylesheets, scripts, images, and crucially, fonts. Once a font file is identified, you can often access its URL and download it directly.

1. Open Chrome DevTools

Navigate to the web page containing the font you wish to download. Right-click anywhere on the page and select 'Inspect', or press Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (macOS).

2. Go to the Network Tab

In the DevTools panel, click on the 'Network' tab. This tab will start recording all network requests made by the page.

3. Filter for Fonts

To narrow down the requests, click on the 'Font' filter button (it looks like a small 'T' icon) or type font into the filter search box. This will display only the font files loaded by the page.

4. Reload the Page (if necessary)

If you opened DevTools after the page fully loaded, some font requests might have already completed. Reload the page (F5 or Cmd+R) with the Network tab open to capture all font requests from the beginning.

5. Identify and Open the Font File

Look for entries with .woff, .woff2, .ttf, or .otf extensions. Click on the desired font file in the list. This will open a panel showing details about the request.

6. Download the Font

In the details panel, locate the 'Headers' sub-tab. Find the 'Request URL' field. Copy this URL. Paste the URL into a new browser tab and press Enter. The browser will typically download the font file directly. If it displays the font in the browser, right-click and choose 'Save As...' to download it.

Alternative Method: Using the Sources Tab

Sometimes, fonts might be embedded or referenced in ways that make them less straightforward to find in the Network tab. The 'Sources' tab can also be useful, especially for fonts defined directly within CSS files or when inspecting local storage.

1. Navigate to the Sources Tab

In Chrome DevTools, click on the 'Sources' tab.

2. Explore the Page Resources

In the left-hand pane, expand the top (or the domain name) entry. Look for a folder named fonts or css. Font files are often organized within these directories.

3. Preview and Download

If you find a font file listed, clicking on it might display a preview. You can then right-click on the file in the left pane and select 'Open in new tab' or 'Save as...' to download it.