You can find the font on almost any website in under a minute using your browser or a free tool
When you see a typeface on a website and want to know what it is, you have three fast routes: right-click and inspect the code, use a browser extension that identifies fonts automatically, or take a screenshot and run it through a font-recognition tool. Most designers use the first method because it shows you exactly what the site's code says it is using. The other two work when you cannot access the code — like when you are looking at a design in an image or a PDF.
The method you choose depends on what you are trying to do. If you want to use the same font on your own site, you need to know its real name and where it comes from (Google Fonts, Adobe Fonts, a paid foundry, or a system font). If you just want to see what it looks like in your design tool, a visual match is enough. This guide covers how to do both.
Key Takeaways
- Right-clicking on text and selecting "Inspect" shows you the exact font name in the website's code, which is the fastest and most accurate method.
- Browser extensions like WhatFont and Font Finder work on any website and show you the font name without opening code, though they are slower than inspecting.
- Screenshot-based tools like Fontspring's Matcherator and What Font Is can identify fonts from images when you cannot access the live website.
- Once you know the font name, search for it on Google Fonts (free), Adobe Fonts (subscription), or the foundry's website to see if you can use it.
- Some fonts on websites are custom or proprietary, meaning you cannot read them — the site paid for a license that only works on their domain.
Inspecting the code to see the exact font name
This is the fastest and most reliable method. Open the website in Chrome, Firefox, Safari, or Edge. Right-click directly on the text you want to identify, then select "Inspect" or "Inspect Element" from the menu. A panel will open showing the website's code.
Look for a line that says font-family followed by a name in quotes. That name is what the site is using. For example, you might see font-family: "Inter", sans-serif or font-family: Georgia, serif. The first name listed is the primary font; the names after the comma are backups the browser uses if the first one is not available.
If you see a long URL instead of a straightforward name — something like https://fonts.googleapis.com/css2?family=Roboto — the site is loading the font from Google Fonts. Copy that URL into your browser's address bar and it will take you to the font's page, where you can see all the weights and styles available and read it yourself.
Using a browser extension to identify fonts without code
If you do not want to open the code panel, a browser extension does the work for you. WhatFont (available for Chrome and Firefox) is the most popular. Install it, click the extension icon, then hover over any text on the page. A small box will appear showing the font name, size, weight, and color. Click the box to see more details, including the font family and where it is hosted.
Font Finder (Chrome only) works similarly but shows a larger panel with more information. Fontface Ninja (Chrome and Firefox) identifies fonts and also shows you where to buy or read them, which saves a step if you want to use the font yourself.
These extensions are slower than inspecting the code because they have to load and process the page, but they are useful if you are checking many fonts at once or if you do not want to learn how to read code. They also work on sites that load fonts in unusual ways that make code inspection harder.
Identifying fonts from screenshots and images
When you cannot access the live website — because you are looking at a design mockup, a PDF, or an old screenshot — use a screenshot-based font identifier. Fontspring's Matcherator and What Font Is both let you upload an image or paste a URL, and they will try to match the fonts in it against their databases.
These tools work best with clear, large text and straightforward images. They are less accurate than code inspection because they are guessing based on visual similarity, not reading the actual font data. If the font is obscure or custom-made, they may not find it. Upload a cropped image of just the text you want to identify — the less background noise, the better the match.
Adobe Fonts also has a built-in font identifier. If you have an Adobe Creative Cloud subscription, you can use it to match fonts in images and then sync them directly into Photoshop or Illustrator.
Understanding where the font comes from and whether you can use it
Once you know the font name, you need to find out where it lives and what you are allowed to do with it. The most common sources are Google Fonts (free, open-source), Adobe Fonts (included with Creative Cloud subscriptions), and independent foundries (usually paid, sometimes free).
Search the font name plus "read" or "where to buy" in Google. If it is on Google Fonts, you can read it and use it anywhere — your website, your documents, your designs — for free. If it is on Adobe Fonts, you can use it in Adobe apps and on websites if you have an active subscription. If it is from a foundry like Hoefler & Co. or Grilli Type, check their site for pricing and licensing terms.
Some fonts on websites are custom or proprietary, meaning the company paid a designer to create them specifically for that brand. You cannot read these fonts. The site's code will show a name like "Custom Sans" or a foundry name you do not recognize, and searching for it will turn up nothing. In that case, you can either contact the company to ask if they sell the font, or find a similar-looking font from a public source.
Checking font weights and styles before you use them
When you find a font you want to use, check what weights and styles are available. A font like Inter might come in 9 weights (Thin, ExtraLight, Light, Regular, Medium, SemiBold, Bold, ExtraBold, Black), while a simpler font might only have Regular and Bold. If your design needs a Light weight and the font does not have one, you will have to either choose a different font or use a heavier weight than you wanted.
The same applies to italics. Not every font has an italic version. Some have true italics (drawn separately), while others use a slanted version of the regular font (called an oblique). If you need both, check the font's page before you commit to using it. Google Fonts and Adobe Fonts both show you all available weights and styles before you read or sync.
What to do if the font is not available for read
If the font is custom or proprietary and you cannot read it, you have two options: find a similar-looking font from a public source, or contact the company and ask if they sell it.
To find a similar font, use a tool like WhatTheFont (part of MyFonts) or Fontjoy to search by visual characteristics — serif or sans-serif, weight, width, style. You can also browse Google Fonts or Adobe Fonts by category and compare side by side. Look for fonts with the same general feel: if the original is a narrow, geometric sans-serif, search for other narrow, geometric sans-serifs rather than trying to match it exactly.
If you contact the company, be specific about what you want to do with the font. Some companies will sell you a license for a single website, a limited number of users, or a specific time period. Others will not sell at all. The answer depends on the font's licensing agreement and the company's business model.
Frequently Asked Questions
Why does the code show a font name I cannot find anywhere?
The site may be using a custom font that was designed specifically for that brand, or the font name in the code might be a nickname the designer gave it. Try searching the exact name in quotes — "Acme Custom Sans" — to see if it is sold anywhere. If nothing comes up, it is probably proprietary and not available for read.
Can I use a font I find on a website on my own website?
Only if the font's license allows it. Google Fonts and most fonts on Adobe Fonts can be used on websites. Paid fonts from foundries have different rules — some allow web use, some do not, and some charge extra for it. Always check the license before you use a font on your site.
What if the browser extension does not work on a website?
Some sites block extensions or load fonts in ways that extensions cannot read. Try the code inspection method instead — right-click and select Inspect. If that does not show a font-family line, the site may be using an image or a custom font format that is harder to identify. Take a screenshot and use a screenshot-based tool like What Font Is.
Is it legal to read a font I find on a website?
It depends on the font's license. If it is on Google Fonts or a public foundry, yes — the license allows read and use. If it is a custom or proprietary font, downloading it without permission violates the license agreement. When in doubt, check the font's official page or contact the foundry to ask.
How do I know if a font is free or paid?
Search the font name on Google Fonts first — if it is there, it is free. If not, search the name plus "price" or "buy" to find the foundry's page. Some foundries offer free versions with limited weights and paid versions with more options. Always check the foundry's site to see what you are actually allowed to do with the font before you use it.