How to Identify Google Fonts on Any Website
Google Fonts powers typography on millions of websites, but figuring out exactly which Google Font a site is using isn't always obvious. Whether you're trying to match a design or just curious about a beautiful typeface, these five methods will help you identify any Google Font quickly and reliably.
Check Network Requests for fonts.googleapis.com
Open Chrome DevTools (F12 or Ctrl+Shift+I) and navigate to the Network tab. Reload the page, then filter requests by typing 'font' or 'googleapis' in the filter bar. Any requests to fonts.googleapis.com or fonts.gstatic.com confirm the site uses Google Fonts. The URL itself contains the font family name and weights — for example, a request to fonts.googleapis.com/css2?family=Inter:wght@400;700 tells you the site loads Inter in regular and bold weights. This is the most definitive method because it shows exactly what the browser is downloading.
Use the Font Finder Extension for Instant Detection
Install Font Finder from the Chrome Web Store, click the extension icon, and hover over any text on the page. Font Finder reads the computed CSS properties directly from the browser and displays the font family, size, weight, color, and line height in a clean overlay. If the rendered font is a Google Font like Roboto, Open Sans, or Lato, you'll see the exact name immediately. This is the fastest method because it requires no manual inspection or knowledge of DevTools — just hover and read.
Inspect CSS @import or <link> Tags in the <head>
View the page source (Ctrl+U) and search for 'fonts.googleapis.com' in the HTML. Most sites load Google Fonts via a <link> tag in the <head> section, which looks like <link href='https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600' rel='stylesheet'>. Some sites use CSS @import statements inside their stylesheets instead. In either case, the URL parameters spell out the font family and the specific weights being loaded. If a site uses multiple Google Fonts, you'll often see them combined in a single request separated by ampersands.
Use the Google Fonts Catalog to Confirm a Match
Once you have a font name from inspection, visit fonts.google.com and search for it to verify. The Google Fonts catalog lets you preview the typeface, see all available weights and styles, and confirm it matches what you saw on the website. You can also type custom sample text to compare it visually. If the font isn't in the Google Fonts catalog, the site is likely using a self-hosted or commercial typeface, even if the name sounded familiar. The catalog currently offers over 1,500 font families, so most free web fonts you encounter will be there.
Look for Font Preconnect Hints in the Page Source
Performance-conscious websites often include <link rel='preconnect' href='https://fonts.googleapis.com'> and <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin> tags near the top of their HTML. These preconnect hints are a strong signal that Google Fonts are in use, even before you find the specific font link. Search the page source for 'preconnect' to spot them quickly. While preconnect hints don't tell you which specific font is loaded, they narrow your search and confirm you should look for a corresponding Google Fonts stylesheet link or @import rule elsewhere in the code.
Try Font Finder Now
The fastest way to identify fonts on any website. Install the free Chrome extension and start inspecting typography in one click.