4 Ways to Find What Font a Website Uses

Daily we come across many websites while browsing internet. Most of them we will forget after getting the needed information, while some websites will stand out in the crowd with good looking fonts. A website can use different types of fonts to appeal the readers and offer great user experience. If you are a blogger or designer, you may also be interested in using similar font style in yours or your client’s website. In this article, we will explain various methods to find what font a website uses.

Related: How to find number of pages in a website?

Fonts and Websites

Generally, there are three ways to use fonts in any website.

• Self-hosted custom fonts – there are pretty custom fonts available in the marketplaces for purchases. Anyone and buy and host these fonts on the same server where the website content is also stored.
• Third-party fonts like Google Fonts – website owners can easily use Google Fonts API and dynamically call the fonts from Google Servers to use on their sites. This is the most popular form in content management systems like WordPress as theme and plugin developers will use free Google Fonts.
• Using system stack – the problem with above two methods are that loading of font files will affect the webpage’s loading speed in browser. Using default system font will force the website to use your computer’s font settings. This will help to improve the speed of website as well as offer greater experience for readers.

Remember, some website owners may download Google Fonts and host on their own server. No matter what type of font a website use, the site needs to include the font in its CSS (Cascading Style Sheet). For third-party fonts, it will be from external CSS and for other two options, it should be used internal CSS of the site. Therefore, you can easily find the font family using one of the below methods by checking the CSS code.

Method 1 – View Page Source Code

The easiest option to check the font used on a website is to check its source code.

• Open the website in Chrome or with your favorite browser.
• Right click and select “View Page Source” option from the context menu.

• On the new page that opens, press “Control + F” in Windows or “Command + F” in Mac.
• Type “font” in the search box and hit enter to find the word in source code.
• If the website uses Google Fonts or any other third-party fonts, you can find the corresponding font URLs as CSS stylesheets. Below is how it looks on the page source code:

• As you can see, there are two font families used from fonts.googleapis.com which is the API for Google Fonts server.

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet">

• With this information, you can find the name of the font family used on the site.

Method 2 – Check with Developer Tools

If the website does not use third-party fonts, then you will not see any stylesheets included in the page’s source code. In such case, the website should use either custom fonts or use system stack within website’s stylesheet. The easy way to explore the website’s stylesheet is to view any HTML element’s source using browser’s developer console. You can find the font used on the website with font-family CSS property.

• When you are on the webpage, press F11 in Windows to developer console. If you are on Mac, right click on the webpage and select “Inspect” or “Inspect URL” option to open developer console.

• When you see the developer tools, click on the element selection tool and then hover the mouse over any text element on the webpage.
• You can see a pop-up showing the details of the element with font details like below.

• However, it is difficult to get the complete font details as the line will truncate in the pop-up.
• You can view the details of element’s CSS in “Styles” section in developer console. Scroll down in Styles” section and find what font the website uses.

• If you see the strikethrough line for font-family property for body element, scroll up and find the active font-family for that selected text element. This essentially means the website uses multiple fonts for different elements on the page.
• If the site uses self-hosted or third-party font files, then you can also check under “Sources” section of developer console to find the original location of the fonts loaded on the site.

Method 3 – Check with Page Speed Testing Tools

Some websites block right click and viewing page source and restrict accessing developer tools. In this case, you can’t use the above two methods to fins what font a website uses. However, you can use some third-party tools like page speed testing tools to find the CSS and resources used on the site.

• Go to Pingom page speed measurement tool.
• Enter the webpage URL that you want to find the font family.
• Click “Start Test” button and wait for few seconds to get the results.

• Scroll down and check and “File Requests” section.
• If the website uses font files (self-hosted or external), then you can find a HTTP request in this section.

• Using these details, you can find the fonts used on the tested website.

Method 4 – Use Chrome Browser Extension   

The last option is to use an extension in Google Chrome browser. This will help you to get the font by hovering mouse over the text content on the webpage after installing the extension.

• Open Chrome browser and go to “chrome://apps/” command URL.
• You will find list of apps and click on Web Store to go to Chrome Web Store’s extensions section.
• Type “font find” in the search box to filter relevant extensions.
• You will find few extensions and click on “What Font – find font” extension.

• On next screen, you can find all details about the extension and click on “Add to Chrome” button.

• Confirm the pop-up by clicking “Add extension” button. You will see a success message and the developer website will open in a new window which you can simply close it.

• Now, open the webpage that you want to find the font. Click on the puzzle icon next to the browser’s address bar and select “What Font – find font” extension.

• Hover the mouse over text elements on the page to get the font family name. You can click on the text to get a pop-up showing font family, style, line height, size and color details.

• It is possible to get font details of multiple elements on the page. You can hover or click on different elements on the page to get the font details.
• Finally, click on “Exit What Font” pop-up to quit the extension and start viewing the page in normal mode.

Final Words

A website can import fonts either using internal or external stylesheets. Basically, you can analyze the CSS properties in the stylesheets to get the complete font details. You can use one of the above methods to easily find what font a website uses.