Detect Font Face Easily with Fontface Ninja
If you stumble onto a font that you want to adopt for your own use, the common way to find out info about that font is to use the Inspect Element option found in the Chrome browser.
Basically, while on Chrome, we highlight the text and right-click to select Inspect Element. We can then see all the CSS code related to the highlighted text.
Change Fonts on Any Websites with This Chrome Extension
Ever wanted to see how a different font might look on a website? Using the Font Swap extension,... Read more
There is a problem though. As you can see in the second image, the highlighted text gets styled with many selectors. To check out all of them one by one, is going to take some time.
Using Fontface Ninja to Detect Font
Here is where Fontface Ninja comes in. It is a browser extension that helps you identify a font by name. And all you have to do is hover over the font you are interested in. On top of the name of the font, Fontface Ninja also gives you the size and line spacing as well.
Another feature of Fontface Ninja you might find handy is the ability to hide pictures and ads so you can just focus on the fonts with no disruptions. The plugin also lets you try a font, and if you like it to buy or download the font.
Installing Fontface Ninja
You can download Fontface Ninja to use on the browser of your choice.
Using Fontface Ninja
Once installed, an app icon of a jumping ninja will be shown near the browser address bar. Click on it to activate it. Now, you can hover over any text on a webpage to get a tooltip showing information about the font.
To try the font, click on it, and the FontFace Ninja logo will shift to the left, giving you space to type out and try the font you picked. You can also adjust the size of the font.
To hide all images so you can keep your focus on just the typography, click the Mask option, which is next to Close. All detect-font-fontface-ninja/ will be hidden from view.
Related – Live Test Fonts on your Browser
If you like Fontface Ninja, you’d probably love Font Dragr. We previously wrote about how it is a handy tool to help developers like you test fonts live on a browser just by dragging the font into the webpage itself.
Check out more on how you can live test fonts with Font Dragr.