Enthusiastic designers are constantly on the lookout for new fonts. Not only while they are working.
You can notice new fonts to add to your collection while scrolling social media, browsing brands’ websites, and even playing your favorite video games. All that is left is a technical aspect: to identify a font family used in the project and purchase a license for it.
There are many ways of identifying fonts. In this article, we will cover the easiest ones.
Why do you need to know what font is used on a website?
For a novice designer, learning about fonts used in various projects is a valuable aid to grow professionally. It helps develop watchfulness.
Look for projects similar to yours and analyze fonts other specialists use. This way, you will be able to identify what typeface categories align well with specific themes. Analyze the projects that you do not find good enough as well. It will help a lot to understand what typefaces do not seem suitable and why. To make the process even more fascinating, make your list of “good” and “bad” typefaces for various project themes.
Identifying fonts used in different projects proves to be practical for experienced designers, too. This way, designers add more typefaces to their collections and find new studios that make interesting and stylish fonts.
How to identify a font on a website
There are several ways to check what typeface a project’s website is using, such as:
- Installing a browser extension.
- Searching for the name in the page’s code.
- Identifying fonts by image using online services.
- Identifying fonts in Adobe Photoshop.
Let us focus on each of them.
Browser extensions
Many browser extensions work as font identifiers for websites. We will share with you the ones that have been verified by us and are often used by designers.
Fonts Ninja
Browsers: Chrome, Firefox, Safari.
Website: https://www.fonts.ninja/
One of the most popular extensions. It identifies both the typeface and its font style. An additional benefit is that you can not only check different font types but also buy them if you wish. Through Ninja, you can access the link to purchase the font—this is simple and convenient.
To start using the extension, download and install it. After that, an icon with a ninja will appear in your browser’s toolbar. Click on it, and hover over text sections to identify fonts. You can also click on the text to access an additional panel and try the font. You can also use Fonts Ninja on your smartphone via the app.
By the way, the official website of Fonts Ninja uses the TypeType studio’s bestseller—TT Norms® Pro.
WhatFont
Browsers: Chrome, Safari.
Website: https://www.whatfontis.com/
Another well-known font identifier browser extension.
After installing it, highlight a text fragment and click the “WhatFont” icon. You will get information about the font family used on the website, the font style, and the font size.
In addition to the above-listed extensions, designers often use CSS Peeper, TypeSample, and more. Each has its own extra functions, so we recommend trying some of them and choosing the most convenient for you.
Manual search in the page’s code
A difficult and, at the same time, one of the easiest ways to identify fonts on websites is to find them in the page’s code. Remember that this method is not ideal because the fonts may be renamed.
To search manually, choose a text fragment, open the page’s code, and find “font-family”.
In Chrome and Firefox, right-click on the text and choose the menu item that opens the page’s code for viewing. After that, find the Elements tab, then Styles tab, and there you will find the “font-family” code. In Safari, the actions are the same, but you need to make sure that the Developer menu is visible. Check the box at the bottom of the Advanced tab to do that.
Online services to identify fonts by image
Sometimes the font you like is on an image, not a page. It can be a banner, a photo, or a picture on social media.
For such cases, there are various online services that can help you identify the font you want.
They all function similarly. Simply visit the service website, upload the image containing the necessary font, and wait for the result.
Here are some of the most frequently used font identifier services of this kind:
You can also use social media to ask other designers to help you identify a font.
Identifying fonts in Adobe Photoshop
You can find out what font is used on an image with the help of Adobe Photoshop. The Match Font function is constantly improving but does not support all languages at the moment.
To use the function:
- Select the text on the image using the Rectangular Marquee Tool.
- Choose Type and then Match Font.
- In the list of similar fonts, choose the one you think suits best.
Bonus: there is a smartphone app
Of course, captivating fonts await designers everywhere, not only at the work desk. To always have the possibility to add new fonts to your collection, install the app on your smartphone.
At the moment, WhatTheFont and Find My Font are the most popular. To identify a desired font, simply open the app and point the camera at the image. Choose the most suitable font from the list of the most similar ones.
In place of a conclusion
Aesthetic fonts await designers outside their work as well. It is better to have some tools prepared to quickly find out what font is used on a website, poster, banner, or café sign.
FAQ
How can I identify a font on a website?
The quickest way is to use a browser extension like “WhatFont.” Simply install the extension, activate it, and hover your cursor over the text on a webpage. The tool will instantly show you the font’s name, size, weight, and other details.
Can I use a mobile app to identify a font from a website?
Yes, you can use mobile apps for this. To identify a font you like, just open the app and point your camera at the text. The app will provide a list of similar fonts for you to choose the best match.
How do I find a font using a page’s source code?
To find a font using the source code:
1. Highlight the text you’re interested in.
2. Right-click on it and select “Inspect” (Chrome/Firefox) or “Inspect Element” (Safari).
3. In the developer panel that appears, find the “Styles” tab and look for the font-family property.
For Safari users: You’ll first need to enable the developer menu. Go to Safari Settings → Advanced and check the box that says “Show Develop menu” in menu bar.
What’s the most popular browser extension for identifying fonts?
One of the most popular and user-friendly extensions is “WhatFont.” Its main advantage is that it instantly displays font information visually, right on the page, without you needing to dig into the code.
How can I identify a font in an image?
There are several online services that can identify a font from an image. The most commonly used ones are:
– myfonts.com
– identifont.com
– whatfontis.com
How do I identify a font in Adobe Photoshop?
To use the font identification feature in Adobe Photoshop, you need to:
1. Select the text in the image using the Rectangular Marquee Tool.
2. Go to the “Type” menu and click “Match Font.”
3. Choose the best match from the list of similar fonts that Photoshop provides.
Can I identify a font from a picture or a screenshot?
Yes, you can! There are special online services like WhatTheFont for this. You upload an image with text, the service automatically recognizes the characters and searches its font database for matches, offering you the most suitable options.
