How to Know What Fonts a Website Uses

If you’ve ever seen a particularly attractive website and wondered how to see what fonts a website uses, the answer is as simple as opening your browser’s inspector. Every bit of a website is interpreted in your browser. Thus, if you know how to use your browser inspector correctly you can not only find out the sources but also the images it has, the CSS properties of any other element found on the page.

In this post, we’ll see how to use the Chrome browser inspector to find what fonts a website uses, and even how to start playing with them. But first, I’ll explain how to access it and what features you have available in the inspector.

Access Chrome Inspector

If you use the Chrome browser and want to inspect a website, the first thing you should do is access the inspector window. There are several ways to do this:

• By pressing the F12 key, or
• By right-clicking on a certain item and in the menu that opens, access the Inspect option. The advantage of this method is that it directly highlights the element in question, or
• By pressing the key combination Control+Shift+I (on Windows) or Cmd+Alt+I (on Mac), or
• By accessing the Chrome menu (3 dots in the upper right bar) » More tools » Developer tools.

The inspector window can be displayed integrated into the browser window itself or displayed in a separate window. To access these options you can do it by clicking the configuration icon (3 dots) at the top right of the inspector and changing the value of the property «Dock Side».

You also have the option of viewing the page content in computer view mode or as if you were viewing it on a mobile device. Click on the second button on the left side of the top bar of the inspector and you’ll see how the content will automatically be displayed as if you were accessing it from a mobile device.

You can also indicate the type of device you want it to display it on, the size or if you want to display it in portrait or landscape mode.

Inspector Main Tabs

As you may have seen, the inspector is made up of different tabs.

From each of them you will have access to different functionalities and features:

• Elements: shows the HTML code of the page, as well as the styles that are applied. you can also modify them and add new rules quickly.
• Console: shows the different error and warning messages that occur on the page (images that do not load, javascript errors,…)
• Sources: displays the resource tree for the page. You can see where the different resources are obtained from and modify them.
• Network: shows the different requests made from the website, accessing the content of the request, the response obtained, times…
• Performance: shows the processes that are running and serves to measure the performance of the page.
• Memory: shows the memory consumed during the loading and execution of the web page.
• Application: displays useful information about the resources used by a web application.
• Security: displays information about the different sites accessed from the page and their respective certificates.
• Audits: allows you to generate an audit report to check errors.
• There are plugins that add tabs and functionality to the inspector, so there may be more tabs. In the previous image, it is shown that we have installed the Redux DevToolsplugin.

Elements Tab

Let us now return to the issue at hand: we wanted to know the font of any content on a web page.

As I mentioned before, from the Elements tab you can access the HTML code and the styles of the different elements on the page you are in.

As you can see in the image above, on the left you have the main window that shows you the source code. And on the right, you have the panel of CSS style rules that are being applied to the different elements of the page.

In fact, in the styles panel you have three tabs:

• Styles: shows the applied CSS rules and you can modify and add new ones.
• Computed: shows all the rules applied to the element, with a panel that represents the borders, margin and filling of the element.
• Event Listeners: shows the tree of events that have been launched on the page and controls affected by them.

View the details of an item

So, for example, if you go to our main Nelio Software page, select the words Nelio Software from the title and right-click to inspect what the item is, the inspector opens showing you the image above.

In the inspector image, you can see that the main window is telling me that the title style “Nelio Software” is h1.

In this same window, you have the option to right-click on any attribute or text and modify or delete it. Obviously, any changes you make here will not change the original content, but it is precisely a very useful tool when you are designing pages and you want to get an idea of how any change you make looks like.

See the Font

Now you know that it is a headline, but what about the font?

Well, very simple, in the Computed tab of the inspector you will find all the properties of the selected item. Scroll down to the font-family attribute and there you will find exactly the font that has the headline of our website.

And if you’re curious about how that element would look if you wanted to change the font, you go to the Styles tab, go down to the font-family attribute and you can modify it directly with the value you want.

You’ll automatically see your website with the changed font type

As you can see, the Google Chrome inspector is a very comfortable and easy-to-use tool for playing around and trying out the design you would have left after applying any modification to an element.

Nelio A/B Testing

Native Tests for WordPress

Use your WordPress page editor to create variants and run powerful tests with just a few clicks. No coding skills required.

More Info

What About the Font of an Image?

The Google Chrome inspector, as you’ve seen, lets you view the properties of any element on your page. But if what you want to see the font of an image on a website, you won’t be able to see this with the inspector. The inspector will show you the properties of the image as such inserted in your page but will not show you the details of the content of that image.

To do this, there are some tools, such as Font Squirrel Matcherator or Whatfontis.com, that can help you identify the font used in an image. To do this, in both tools you must either download the image (at whatfontis.com you can also indicate the URL of the image) and then select the part of the image that contains the letter you want to identify.

Both tools will show you a whole set of fonts that roughly match the selected text. But if you suspect that this isn’t an exact match, you can google similar fonts to those indicated by the tool and you will see what you get.

Featured image of Gemma Evans on Unsplash.