How to tell what font is on a page?

You can usually tell what kind of font is employed on a website page or in a document. There are several approaches you may take based on where you're reading the content and how often you plan to verify font styles.

The font in a document

If you are using a word processor to examine the document, select the text and check the font selection in the toolbar. What font is being employed in the bolded text should be shown.

The font used on a website

By plug-in

You may wish to obtain a plug-in for your web browser if you regularly want to examine the typefaces used on a website. You may access these plug-ins via an icon on your toolbar, and they launch immediately whenever you open a web page. Most work similarly, either by selecting the text and highlighting it or by clicking over the font and selecting a toolbar button. A pop-up screen or text bubble containing the font name is required.

1. Fontanello (Chrome + Firefox)

The fastest approach to determine what font a website is using is to use the Fontanello Chrome and Firefox Extensions. To see the font family and several other properties, simply right-click on the text, choose Fontanello from the menu, and presto!

2. Visual Inspector (Chrome)

In comparison to the previous two, the Visual Inspector Chrome Extension has a little more depth. Try clicking the Visual Inspector button in the Browser toolbar to launch the tool, then navigate to the Typography submenu. All font styles used as well as an analysis of all the fonts on the homepage, are now displayed to you.

3. WhatFont (Chrome and Safari)

My preferred method for finding fonts is the WhatFont Chrome and Safari Extensions. You must select the What Font icon from the browser menu in order to launch the tool. Now that you can pick numerous text blocks, you can see the font split in comparison to Fontanello more clearly.

4. Good old Code Inspection (All Browsers)

In order to learn more about the typefaces used without having to install thousands of browser extensions, we may perform a simple code analysis as follows: Click the mysterious text with the right mouse button in Google Chrome and choose Inspect. When DevTools opens, make sure the Styles tab is selected, then click on the Font-Family characteristics to get additional information about the typefaces. Click the text using the right mouse button in Firefox and choose Inspect Element. Their inspector appears; go to the practical Fonts tab to find the information you want.

Make sure the Developer menu is displayed if you're using Safari by ticking the option towards the bottom of the Advanced tab of Safari settings. Right-click the text once more and choose to Inspect Element. Select the Styles - Computed option, and if the details sidebar is closed, open it. The font information inside the style characteristics will be shown in the font-family section.

5. Uncover Renamed Fonts (advanced method)

Whenever a font family isn't clearly defined, font examination tools and processes are automatically confused, which poses a challenge for us. We actually download the font first.

There are several methods to accomplish this but begin by writing down the name of the current typeface. Open the Inspector tool, then go down to the Frames area and choose Fonts from the Inspector's menu on the Application Tab. The font name from before must match the file name. Now click the download button for that font in a new tab. The font information is then attractively exhibited when we drag that font file into the wonderful What Can My Font Do? website.

By text editor or word processor

On the website, you may highlight the text whose font you want to know. Copy the text using your mouse's right-click menu or the keyboard shortcut Ctrl+C. Open a word processor or text editor, then open the content in a new document by pasting it there (right-click using your mouse and choose Paste, or click Ctrl+V on your keyboard). Once more, underline the text in the word processing document, and examine the font selection in the toolbar. The font employed for that text must be visible.

By source code

Checking the website's source code is a more challenging, but still viable approach to using. The source code may typically be viewed by right-clicking the webpage and choosing the option to examine the page source from the pop-up menu. The source code for the web page that was created is visible there. You may locate the font style employed for the content on the web page in this source code. However, the font style is frequently provided in a CSS file that may not be seen.