Google Fonts detector

Google Fonts logo

How can you check if a website uses Google Fonts?

Checking if a website uses Google Fonts can be accomplished by examining the page source and looking for specific indicators.

Here’s a step-by-step guide on how to do it:

  1. Open the Page Source: Right-click on the webpage and select “View Page Source” or press Ctrl+U (Windows) or Cmd+Option+U (Mac) to open the page source code.
  2. Search for Google Fonts Link: Use Ctrl+F (Windows) or Cmd+F (Mac) to open the search function. Look for the following:
    • fonts.googleapis.com: This URL indicates that the site is using Google Fonts. You may find a line like: <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  3. Check for Google Fonts API Scripts: Sometimes, Google Fonts are loaded via a JavaScript in the <script> tags. Look for scripts loading from fonts.googleapis.com or gstatic.com:
    • <script src="https://fonts.gstatic.com/s/Roboto/v16/KFOmCnqEu92Fr1Mu4mxP.woff2"></script>
  4. Inspect the CSS Styles: Check for CSS rules that apply Google Fonts. Look in the page source or linked CSS files for font-family declarations that may reference Google Fonts:
    • Typical font-family examples: font-family: 'Roboto', sans-serif;
  5. Use Web Developer Tools: You can also open the browser’s developer tools by right-clicking the page and selecting “Inspect” or pressing F12. Navigate to the “Network” tab, refresh the page and filter by “Font” or look for requests to fonts.googleapis.com to see if any Google Fonts are being loaded.
  6. Check for Font Display Properties: Google Fonts often include the font-display property in their CSS. Look for lines that mention this property, indicating how the font should behave during loading, e.g., font-display: swap;.
  7. Look for @import Statements: Sometimes Google Fonts can be included using @import in a CSS file. Search for:
    • @import url('https://fonts.googleapis.com/css2?family=Roboto');