The first thing that catches the attention of anyone who visits the website is the font being used on the website. Quality typography can enhance your visitors’ experience, contributing to a higher activity rate on your website.
Millions of websites on the internet use a wide range of fonts. Gone are the days when developers have to use a limited selection of web-safe fonts for their blogs and websites, such as Arial, Veranda, Georgia, etc. Luckily, now developers get to play with so much more beautiful fonts for the web.
Imagine you come across a WordPress site or blog and notice the handwriting font used by WordPress theme for the headline title is worth dying for! You can’t wait to apply the same font on your website. Now, off to find and download the font. But, wait a minute, what was the name of the font? Ugh, bummer.
Identifying the font was never easy. It often required you to directly contact and ask the site owner a million-dollar question of what font they are using. But this is not what happens these days. Some specific methods and tools will help you identify a font used on a site.
In this guide, we will show you step-by-step how to use these methods and tools to get the name of your favorite font. We found out the font used by this casino site the same way though!
Let’s dive in.
Why You Need to Check the Font
As we have discussed earlier, a readable and attractive font will improve your User Experience(UX) and your website’s readability. Like changing the font on your website, a small step can bring you many more surprising results than you might not have expected.
An attractive font ensures that visitors comfortably engage with your content without struggling to get it. If your font is way too stylish and illegible, your readers will find it very difficult to understand and appreciate your material.
How to See What Font a Website is Using
There are two methods you can use to check the name of the font a website is using. One excellent feature is your browser’s inspection feature, but you will also find many extensions that will work just as correctly as the inspection feature.
Furthermore, there are ways to find fonts from images using online tools. Let’s take a look at each of the methods.
Identify Fonts Using the Browser Inspector Tool
Using the browser’s Inspector tool is undoubtedly the easiest way to check the font’s name that is being used. Although we will demonstrate the method using Chrome Inspector, it’s worth noting that other browsers have the same feature.
To get the font name that is being used, you first have to right-click on the web page containing the font you want to find out. From the resulting menu, choose Inspect.
You can also use a keyboard shortcut, Ctrl+Shift+I, if you are a Windows or Linux user. If you are using a Mac, Cmd+Shift+I will work for you.
Once you have opened the Chrome Inspector, you will see a window on the screen’s right side. On the window, look for the text you want to check out. The text will automatically get highlighted when you select the corresponding HTML element.
On the Inspector window, click on the Computed tab and then look for ‘font-family.’
You will get the name of the font and its style listed here.
Identify Fonts Using Browser Extension
A more straightforward way of searching for the font is to use browser extensions, especially if you are not comfortable using a browser inspector. The browser extensions will usually deliver the answer you have been looking for quickly so that you save a lot of your time.
Some of the browser extension you can use are:
- Fontanello
The extension is free to use and allows you to get the name of the font, weight, style by merely highlighting and doing a right-click on it while you are using the browser.
- Whatfont
Whatfont takes font recognition to another level by enabling you to view a typeface’s name just by hovering over it.
- CSS Peeper: designed especially for web-designers, this extension is a bit more robust and will get you additional information from the webpage’s CSS code.
Keep in mind that these extensions have varied browser support. Fontanello is only compatible with Firefox and chrome. Whatfont, on the other hand, is available for Firefox, Chrome, and Safari. CSS Peeper is a Chrome specific tool and is not supported by any other platform.
Online casino sites like bestonlinecasinos247.co.uk use font finders like CSS Peeper to improve their website’s font quality.
End Words
A font that is visually appealing and easy to understand can help your website in a lot of ways. Use the tools and techniques mentioned above to know about any font you find awesome on the internet. Feel free to customize your website by adding a logo to your site.