When we are lovers of design, either in general, or graphic design, we look at all the elements in an image, a poster, a text or a website. Many times we are struck by the typography used for a specific website or section and we want to know what type of font it is. There are several ways to find out.
It is clear that the font type on a web page is one of the most important elements to give personality to the entire website. There are also other parameters such as the images that accompany it, the colors used, the logos and, in general, any other aesthetic or decorative element.
The text is the part that usually contributes the most content to a website, with the permission of images and videos. A typeface that attracts and is also legible it is also essential. Therefore, if you need to know the lyrics that a specific website uses to download it from Google fonts, or you are curious, there are several methods to identify it.
Inspect fonts from the browser
The fastest way to know the source of the web in which we are browsing is to use the Inspector browser. This tool shows you the code used for the web that is “translated” by the browser to show us the page as we see it.
Google Chrome
When you are browsing in Google Chrome there are three ways to open the Inspector:
- Through the top menu: click on View and open Developer Options, click on Inspect elements.
- Within the web we click CTRL. + SHIFT + I on Windows or ALT + CMD + C on macOS.
- On the text we right-click and click on To inspect.
Once open you will see how Chrome’s screen is split in two, on the left you continue to see the web and on the right all its code. Just by moving the mouse cursor over the different elements of the web you will see all the information in HTML and CSS code in the Inspector.
In previous versions you had to “dive” into the text to find the names of the fonts for each section. Now it is much easier because you appears directly on the screen on the text itself. In this case, the body of the article is edited with Montserrat and is 16 pixels in size.
If we place the mouse cursor over the title of the related article on the right margin, we will see how the font type, in this case at 20 pixels in size.
Safari
Apple web browser users can access the Item Inspector in three other ways similar to how we do it in Chrome:
- Going to the top menu according to this path: Development / Show web inspector.
- Pressing ALT. + CMD. + I on the keyboard (macOS).
- By clicking with the right button of the mouse on the text of the web and clicking on Inspect element.
In this case, the Safari Inspector is not as intuitive as Chrome is. The screen is also divided into two showing the web on the left and the Inspector on the right, but it will not show us the source directly when we move the mouse over the text.
Therefore, instead of analyzing the code directly, we will click on the button Sources from the top menu of the Inspector. This will show a side menu on the left, we will display Fonts and we will see the fonts used on the web.
Mozilla Firefox
The Firefox Inspector can also be invoked from three ways:
- From the top menu Tools / Browser Tools / Web Developer Tools.
- With direct access CTRL. + SHIFT. + C on Windows or ALT + CMD + I on macOS.
- Right mouse button and click To inspect.
In this case, the Inspector will be displayed at the bottom of the browser screen with three sections. To see all the information of the typography we have to click on the button Typography in the right column.
Opera
Opera is a web browser with an alternative design, although not too different from the rest. Access to Element Inspector in this way:
- Clicking on Author in the top menu bar and then in Development tools.
- Pressing on the keyboard CTRL. + SHIFT. + I on Windows or ALT + CMD + I on macOS.
- Right mouse button e Inspect element.
The Inspector will open in the right half of the Opera window. To see the information related to the sources, what we are going to do is type FONT in the bar Filter from the bottom of the section Styles (styles). In this way we will see in a highlighted way all the information related to the fonts of the web.
With browser extensions
These applications make some tasks easier for us by doing them faster and adding extra features.
WhatFont
It is an extension that will facilitate the process of knowing what typeface uses a web. If it’s something you don’t need to see often, you can use the web browser’s inspector as explained above.
However, if for professional or curiosity issues you like to know the fonts that are being shown in your navigation, you only have to activate the extension by clicking on its icon (once you have installed it) and the fonts will be displayed on the screen as we move the mouse cursor in one text or another. The only downside is having to deactivate it every time we use it so that the floating windows with the lyrics information do not bother us.
It is available for both Google Chrome as for Safari.
Fontanello
Another of the most used extensions for identify the font of a web page. Once you have installed this extension, which is available to Google Chrome and Mozilla Firefox.
You just have to press with the the right button of the mouse on the selected text of which you want to find out the source. You will see that in the secondary menu you have a drop-down called Fontanello, when you display it you will see the information about the name of the font, its style (thin, normal, bold…), the size and color with its hexadecimal code.
Although it does not have an aesthetic as visual as WhatFont it is true that it is less invasive, you don’t have to go around activating and deactivating the extension.
CSS Peeper
Perhaps it is the most aesthetic and comfortable option of all. Once we have installed the extension, it is only available in Google Chrome, we only have click on its icon when we want to find out the source of the web where we are browsing.
A pop-up window will open on the right side with all the information divided by types: title, subtitle, body …
With web applications
In this case we are going to show some web applications that will help us with the fonts in image-formatted documents. So we will need to take a screenshot of the web previously.
The tool for screenshot in Windows 10 activated by pressing WIN. + SHIFT. + S, in macOS we will press SHIFT. + CMD + 4 and select the surface of the screen that we want to capture.
WhatTheFont
Entering this tool on the MyFonts.com website we can upload an image and WhatTheFont it will analyze it to find out what fonts have been used in its design.
We just have to drag the image on the WhatTheFont screen or click on the button Upload an image and choose the file on our hard drive.
Matcherator
In the same way as WhatTheFont, with Matcherator We can also analyze the fonts used on a website, on a screenshot of a website to be more exact.
We upload the file and Matcherator will ask us to let’s select the part of the image we want to analyze. We only have to press the button Matchearete It! And we will see the styles in the picture.
Whatfontis
What font is is the third tool on the web that will tell us the font used in an image. For this we can upload the capture by clicking on the Browse link by clicking here or by dragging the image directly to the screen.
The extra option that What Font Is includes is that you can include the url of any image on a web And if it contains text, this app will parse it.
Font in Logo
Font in logo it’s a web page for curious more than for professional use. It does not analyze the web, nor does it analyze an image that contains text. It is rather a logo database of the best known brands and shows us the name of the fonts that are in those logos.
For this we will use the seeker, we enter the name of a brand (Coca Cola, Nutella, Chanel …) and it will appear the logo along with the name of the typeface.
In most cases these fonts are exclusive, are protected with Copyright and have been designed exclusively for that logo. This is why it may be prohibited to use them for commercial purposes. In any case, if you click on the logo you will see more information about the font and you can download it on your computer.
The post Guess the font of a website with just two clicks appeared first on ADSLZone.
