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)
Recognise and identify fonts and further analyses on the structure and design of websites
"That looks nice, I wonder what font that is? And what colour?" On the web, as in the garden, it is always stimulating and interesting to look at the results of other creators' endeavours. Conveniently, a modern browser provides the curious web gardener with all the tools he needs to uncover the styling secrets of his favourite 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, 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 in the upper left corner of each Developer Tools window.
Performance: The Inspector
If this button is clicked and you then continue with the
mouse pointer over the web page to be examined, amazing things happen.
Parts of the screen discolour, so the extension of the element, to
where the mouse pointer is currently resting. For this purpose, further
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 here, conveniently, our question
after the font is already directly answered: It is for example
the Roboto Slab font for the page heading.
No further questions - the inspector has solved the case
Reinforcement: FontFace Ninja
Those who like it even more convenient can send a ninja into the race instead of the inspector. The browser extension FontFace Ninja, which is freely available for Firefox and Chrome, specialises purely in examining the fonts used on websites and solves this task in a particularly convenient way. If you click on the FontFace Ninja symbol, all the fonts used on the currently active website are listed in a box. If you click on one of these fonts, you can check the appearance of the respective font with the help of predefined placeholder texts or text passages you have entered yourself. Bookmarks can also be set on the fonts, and a link to each font appears. Depending on the availability of the font, this will take you 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 analysed using the relevant service WhatTheFont and the fonts used - or similar - to the texts recognised in the graphic are suggested as a result. Depending on the nature of the image, this often works surprisingly well.
Conclusion: Web fonts decoded
With top personnel like inspectors and ninjas on board, fonts discovered on the web need not remain a secret. With just a few clicks of the mouse, they can be identified and in many cases are available for your own use.
