Easy Ways to Know the Font Type on a Website

Often we are curious about the font used by a website, when we open a website and see an interesting typography we usually want to know the name of the font used by the website.

To find out the font used on a website, we usually look at the source code (view source) of the website page, then check the meta tags, or by unpacking the contents of the css file on the website and looking for the font-family property. Another way is usually by using firebug.

However, all of these methods are less effective and tend to be time-consuming, there is an easier and faster way to find out the font used on the website that we are currently opening, namely by using Fontface Ninja. With fontface ninja, we just need to put the cursor on the text we want to know, then the font name and font size will appear immediately.

Face Fonts

Installing Fontface Ninja

Fontface ninja is a chrome and safari extension (not yet available for firefox), to install it we must use the google chrome browser, then open the following link Fontface Ninja Extension.

Click the blue Free button
install fontface ninja
A popup will appear, then click the Add button
install fontface ninja 2
A notification appears that the Extension has been installed
install fontface ninja 3
To test it, we just need to open a website (in this example open tutorial-webdesign.com), then click the ninja icon in the top right, then hover over the text on the website page.
enable ninja fontface and testing
From there we can see that the font used in the website title of the Web Design Tutorial is KoolBean Regular
We can download the font used by clicking on the text that we highlight, then writing down the sample text, setting the font size, and pressing the download button.
Downloading Fonts
Distinguishing Fontface and Font in the image.
On the website page consists of text and images, sometimes in an image there is writing (text), we cannot know the type of font in the text that is in an image with a ninja fontface, to eliminate images on a website and so that we focus on the text only then we can press the MASK button on the top right when the Fontface Ninja extension is active.