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 entry "Font-Family" 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 though, I wonder what kind of 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' efforts. Conveniently, with a contemporary browser, the curious web gardener is given all the tools 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). A part of the screen is now taken up by a - at first glance quite confusing - field. A menu bar and various source code outputs are typically visible.
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.
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 with the help of the relevant service WhatTheFont and as a result the fonts used - or similar - are suggested for the texts recognised in the graphic. 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.
See also
After changes have been made in the context of website maintenance, we often receive feedback from customers such as "Everything still looks the same on my site" or "But now the website is completely broken!"
What is going on and what can be done?
If you want to embellish your web garden with new images, first make sure you know the maximum planned display size of the graphics and scale the image files to this pixel size. The suitable file format for the output results from the content.
Gerry the web gardener answers the question how to make a screenshot of a complete homepage.
