Gerry's Quick Guide with Google Chrome Browser
- Select font on the website
- Kontextmenü (rechte Maustaste). “Untersuchen” wählen
- Auf Tabreiter “Computed” klicken
- Scrollen bis Eintrag “Font-Family” erscheint. Die erste aufgeführte Schriftart ist die gesuchte. (“Roboto Slab” in diesem Fall für unsere Überschriften)
Recognise and identify fonts and further analyses on the structure and design of websites
“Das sieht aber nett aus, was das wohl für eine Schriftart ist? Und was für eine Farbe?” Im Web wie im Garten ist es immer wieder anregend und interessant, sich mit den Ergebnissen der Bemühungen anderer Schaffender zu befassen. Praktischerweise bekommt der neugierige Web-Gärtner mit einem zeitgemäßen Browser alle Werkzeuge an die Hand, um die Styling-Geheimnisse seiner Lieblings-Internet-Seiten aufzudecken. Mit der Tastenkombination
[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.
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.
