Gerry's quick guide with Google Chrome Browser
- Select font on the website
- Context menu (right mouse button). "Select "Examine
- Click on the "Computed" tab
- Scroll until the "Font family" entry appears. The first font listed is the one you are looking for. ("Roboto Slab" in this case for our headlines)
Recognize and identify fonts and further analyses of the structure and design of websites
"That looks nice, I wonder what kind of font it is? And what color?" On the web, as in the garden, it is always stimulating and interesting to look at the results of other creators' efforts. Conveniently, a modern browser gives the curious web gardener all the tools he needs to uncover the styling secrets of his favorite Internet sites. With the key combination
[Shift] + [Ctrl] + i
the toolbox is opened:
The developer tools (also developer tools, tools for developers or development tools). Part of the screen is now taken up by what at first glance appears to be a rather confusing field. A menu bar and various source code outputs can typically be seen.
Buttons DOM inspector in Firefox, Chrome, Edge Using this jumble of information to answer our questions is, as with
Every toolbox is a question of targeted application. First step for us
is the click on the symbol of a mouse pointer on a rectangle that is
should always be located in the top left-hand corner of every developer tools window.
Appearance: The inspector
If this button is clicked and you then move with the
mouse pointer over the web page to be examined, amazing things happen.
Parts of the screen become discolored, so the expansion of the element, on
where the mouse pointer is currently resting. For this purpose, additional
information is displayed, such as the element type (div, span, p etc.), the assignment
of classes and IDs for the element and its pixel size. In the Chrome browser
this information in even more detail, so that our question
is already answered directly after the font: It is for example
the Roboto Slab font for the page heading.
No further questions - the inspector has solved the case
Reinforcement: FontFace Ninja
If you like it even more convenient, you can send a ninja into the race instead of the inspector. The FontFace Ninja browser extension, which is freely available for Firefox and Chrome, specializes purely in examining the fonts used on websites and solves this task in a particularly convenient way. If you click on the FontFace Ninja icon, all the fonts used on the currently active website are listed in a box. If you click on one of these fonts, you can take a look at the appearance of the respective font using predefined placeholder texts or text passages you have entered yourself. Bookmarks can also be set for the fonts, and a link appears for each font. Depending on the availability of the font, you will be directed to a Google search for the font or directly to the page where the font is offered for purchase or free download.
Another very useful function of FontFace Ninja, which is currently still marked as beta, is the analysis of fonts in bitmap graphics. If you click on a graphic in the currently open website with the FontFace Ninja box activated, the image is analyzed using the relevant WhatTheFont service and the fonts used - or similar fonts - are suggested for the texts recognized in the graphic as a result. Depending on the nature of the image, this often works surprisingly well.
Conclusion: Web fonts decoded
With top personnel such as inspectors and ninjas on board, fonts discovered on the web need not remain a secret. They can be identified with just a few mouse clicks and in many cases are also available for personal use.