What is a font? How can you identify the font used on a 2025 website?

Have you ever looked at the clear text on a website and thought: ‘What font is being used?’ The selection of fonts greatly influences the identity of a website. They create atmosphere, define a brand's image and, fundamentally, have an impact on the readability of its content for visitors. Identifying which typeface is being used is the initial step towards achieving a specific style, improving the typography of your website or simply to satisfy your interest.

1

Why is it important to choose the right fonts for your website?

Fonts play an important role in expressing your brand's style, whether it's fun, elegant, contemporary or classic.

Having the right font size and style can improve the user experience by making your content easier to read.

Fonts improve the visual appeal and unity of your website design.
This guide will give you all the information you need to identify the fonts on any website.

2

Browser development tools

Every contemporary web browser contains built-in functionalities that allow users to see the coding behind the layout of a website. These development tools are essential for discovering the fonts being used! Here's how to locate them in the main browsers.

Google Chrome, Mozilla Firefox and Apple Safari

To identify the font of a text, right-click or press F12 on it;
Select Inspect (or Inspect element). The development tools panel will open;
Check the Styles or Computer tab in the panel;
Navigate through the CSS styles until you locate the font-family property. This will show the font's name.

Understanding CSS font stacks

Several fonts separated by commas are usually listed in the font-family property. This is known as a ‘font stack’ and acts as a security measure. If the initial font is not present on the user's device, the browser will attempt to use the next font in the queue, continuing this process as necessary.

Troubleshooting: If the font doesn't appear

Sometimes it is necessary for the CSS to localise the displayed font.
This scenario can occur if:

Check whether the code contains references to font files with extensions such as .woff, .woff2, .ttf, .otf to load the font from an external source;
The font is obtained from a CDN: Look for mentions of a content distribution network (CDN), such as Google Fonts or Adobe Fonts.

3

Extensions to identify fonts

Looking for a quick way to discover fonts quickly? Browser add-ons are your greatest ally! Some of the most popular choices are WhatFont, Fontanello and Font Ninja. These extensions make the process more efficient, allowing you to quickly access information about fonts by simply hovering your mouse over the text on the website.

This is how they typically work:

Add the extension to the browser of your choice;
Access the website you are interested in;
Enable the extension by selecting its icon from your browser's toolbar;
Position the cursor on the text you want to evaluate;
A notification will appear with the font name, size, weight, style and, occasionally, colour and line spacing.

Advantages of using font add-ons:

Quick and easy to use: Avoids the need to go into the website code;
Some extensions offer more detailed information about fonts.

Points to bear in mind:

Levels of precision may differ: The accuracy of extensions may not always reach 100%, especially with unique or less popular fonts;
Determine which browsers are supported by each extension by checking their availability.

Common font formats:

WhatFont is a simple and commonly used tool;
Fontanello provides an organised layout and additional information on fonts;
Font Ninja: Strong, with advanced features designed for designers.

The decision on the most suitable extension is based on what you prefer and how much detail you need.

4

Identify fonts on pictures

Occasionally, the font that catches your eye may be included in the logo, banner or other visual elements of a website. Fortunately, there are specialised tools available to help detect fonts in images.

Commonly used font recognition tools based on images

WhatTheFont (by MyFonts) is a flexible tool with an extensive collection of fonts for comparison. Simply upload an image and the tool will try to identify the font used;
Fontspring Matcherator is another excellent option that uses sophisticated matching algorithms and offers additional options for refining search results.

Tips for using image-based font recognition tools:

Prepare your image: Make sure the text is clear and legible. Crop the image to highlight only the specific font you want to identify;
Upload your photo to the designated site of the tool you have selected;
Make changes to the settings (if possible): Some tools allow you to fine-tune the chosen area or offer suggestions on font qualities;
Get your results: The tool gives you a list of possible matches, usually ordered by similarity.

Main factors contributing to accuracy:

The quality of the images improves as the resolution and contrast increase, resulting in superior results;
Fonts that are simple and characteristic are easier to identify than those that are very decorative or personalised.

When image identifiers may not be enough:

Specialised or heavily altered fonts: These may not be available in current databases;
The greater the amount of text provided for analysis, the greater the tool's accuracy.

Tips for improving your performance

Use various image-based font identification tools to exploit their different strengths;
Look for fonts that are similar: If you can't find an identical match, explore the recommended fonts to find similar options that might fulfil your needs.

5

Advanced font identification and management

Examining the site's source code

Sometimes the quickest way to find out the specifics of the font is to explore the website's HTML and CSS code This is the method:

Right-click on the page and select View Page Source (or a similar option).
Use your browser's search function (usually Ctrl+F or Cmd+F) to find:

Font-family: This will display the designated fonts;
Common font file extensions include .woff, .woff2, .ttf and .otf;
Check connections to content distribution networks (CDN), such as Google Fonts or Adobe Fonts.

Understanding font file formats

You'll probably come across these types of file formats when exploring the code:

WOFF, which stands for Web Open Font Format, is popular because of its efficient compression and wide compatibility with browsers;
WOFF2 is a more advanced iteration of WOFF that provides improved compression for faster loading times;
TTF is an outdated typeface that has great compatibility;
OTF (OpenType Font): An adaptable format that provides sophisticated typographic capabilities.

Factors to take into account when licensing fonts

It's important to respect the licence of any font you find before using it.

Free fonts: Several websites, such as Google Fonts, provide free fonts for use; be sure to review their usage guidelines;
Premium fonts: Some fonts have to be purchased in order to be used for commercial purposes. Visit the font manufacturer's website for more information;
Using fonts without proper authorisation can result in copyright infringement, which can have legal consequences.

6

Typography best practices

Tips for combining fonts

The careful combination of fonts is a skilful art. Here are a few recommendations:

Variety is important: Combine fonts with different aesthetics - try mixing a serif and a sans-serif, or a bold display font with a plain font for the body of the page;
Restrict your colour choices: Usually, two or three font types are enough to achieve a unified look;
Use various font sizes and weights to create a distinct hierarchy for your titles and content.

Comprehension and ease of use

Choose fonts that are easy to read: Don't use overly ornate or stylised fonts for body text;
Make sure the font size is large enough to be easily legible, especially on smaller devices;
Line height (Leading): Sufficient space between lines increases readability;
Ensure that there is an adequate level of contrast between the colours used for the text and the background, in order to accommodate visually impaired users.

7

Discover motivation and broaden your understanding of sources

Where to find font ideas

Font websites: Check out websites such as Google Fonts, Adobe Fonts, Font Squirrel (for free options) and MyFonts (for paid options);
Websites for design inspiration: Platforms such as Behance, Dribble and Awwwards feature websites with outstanding typography;
Keep up to date with real-world font trends and choices by following industry publications that focus on web design blogs and articles.

Keep up with current typography trends

Typography, like other elements of web design, is always evolving. Here's your guide to keeping up to date.

Follow typeface manufacturers: Several typeface manufacturers maintain blogs or newsletters that present new launches and design trends;
Attend design conferences and workshops to gain a deeper understanding and insight into web design and typography.

8

FAQ

1. What exactly is a font?
A font is a specific style, weight, and size of a set of characters (letters, numbers, symbols, etc.) used in writing or printing. It's the visual representation of a typeface, designed to convey text in a particular way.

2. How is a font different from a typeface?
A typeface is the overall design of a collection of letters, numbers, and symbols, while a font refers to the specific variation of that typeface, including its weight, size, or style (e.g., bold, italic, etc.). For example, "Arial" is a typeface, and "Arial Bold 12pt" is a font.

3. Why do fonts matter?
Fonts influence how readable and engaging text is. The right font can enhance the clarity and tone of the message, making it easier to read and helping to communicate the right mood or style (formal, casual, creative, etc.).

4. Are there different kinds of fonts?
Yes, there are several types of fonts, including:

Serif fonts (e.g., Times New Roman) with small lines or decorations at the ends of letters.
Sans-serif fonts (e.g., Arial) that lack those extra strokes, offering a cleaner look.
Script fonts (e.g., Brush Script) designed to mimic handwriting or calligraphy.
Display fonts (e.g., Comic Sans) that are highly stylized, often used for decorative purposes.

5. Can I use any font I like for my project?
While you can use any font, it’s important to choose one that fits the purpose of your project. For example, a formal business report might require a traditional font, while a creative poster might work well with a bold, eye-catching display font.

6. What is font size?
Font size refers to how large or small the text appears when displayed. It’s usually measured in points (pt), with larger numbers indicating bigger text. Font size plays a role in readability and visual appeal.

7. Can I change the font in my document?
Yes, most word processing and graphic design software allow you to change the font. Tools like Microsoft Word, Google Docs, Adobe Photoshop, and Canva offer a wide range of fonts for different purposes.

8. What is font style?
Font style refers to variations in the appearance of a font, such as italic, bold, underline, or strikethrough. These styles can help emphasize certain words or sections of text.

9. Are fonts free to use?
Some fonts are free for personal use, but others may require a license, especially when used in commercial projects. Be sure to check the font’s licensing terms before using it for business or promotional purposes.

10. Can I create my own font?
Yes! There are tools and software available that allow you to design your own fonts, such as FontForge, Glyphs, or Calligraphr. It’s a creative and personalized way to create a unique typeface for your projects.

9

Summary

You've now discovered how to recognise the fonts used on a website. Don't forget that fonts have a big influence. They determine the character, readability and overall visual appeal of your website. Selecting the right font can greatly influence how visitors understand and interact with your content.

Studio.351's speciality is creating websites with great typography. Contact us and we'll offer you the best solution.

All you need to know about Web Design:

Pricing

Email

Contact us

Blog

Mail