Often overlooked, typography is one of the essential elements to presenting your brand identity. It requires specialized yet limited fonts to reflect and convey your brand messaging in the digital space, especially in website designs. Luckily, there come the so-called web fonts.
Indeed, web font has gained more popularity, resulting in the number of websites applying custom web fonts that keep growing rapidly. This, of course, has affected the load times – the rendering speed of pages.
Still, many have said that typography on the web is still in its embryonic stage, struggling to keep pace with various rapidly developing and –changing technology. Accordingly, the advent of web fonts has been revolutionary, yet it also comes with inherent and further pros and cons.
For those who are new to web fonts, this article will discuss in more depth about them and their differences from regular fonts or even web-safe fonts. We will also look at some of their benefits and drawbacks, as well as how to make the most of them.
What is Web Font?
Simply put, web font is the ones that are specifically created for websites. They aren’t the ones installed on every computer – operating system and device. Rather, you will usually find them embedded in a web browser or server.
What does it mean? The web browser needs to support and download them into a user’s browser while rendering the website page and applying them to text.
4 Types of Web Fonts
The following are four primary formats mostly found and used on web’ font files today:
1. Embedded Open Type (EOT)
Microsoft’s legacy format is in a compact form of OpenType, used as embedded fonts on web pages.
2. TrueType Font (TTF)
Microsoft and Apple developed this most common font format in the 1980s. If necessary, you can use it to extend support to several older browsers, particularly on mobile. TrueType OpenType fonts are the modern version of TTF files.
3. Web Open Font Format (WOFF)
Developed in 2009, WOFF is a wrapper font format for OpenType and TrueType. It comes with compression (compressing the files) and additional metadata (supported by all modern browsers).
4. Web Open Font Format 2 (WOFF 2)
Google developed it as an update to the original WOFF. It has better compression than its predecessor, offering smaller file sizes. Also, it performs better and is highly suitable for supported modern browsers.
Designed for different browsers that support them, you will need at least four of the above primary font formats to build and design a website. As a result, you can display your fonts on all browsers.
Regular Fonts vs. Web Fonts
Regular fonts – or desktop fonts – are the fonts installed on your computer (operating system) and readily available for use in some software or installed applications, such as Microsoft Word, Excel, Photoshop, or Illustrator.
You can find desktop fonts automatically loaded on your computer, but sometimes you need to download them (for free) or purchase them (licensed). These fonts are also typically optimized for print purposes.
Meanwhile, as stated earlier, you can only use web font files when building websites. They are mainly designed to be seen on a screen, not for print.
Web Safe Fonts
Web-safe fonts refer to the common fonts the early websites (website designs) use. The name “safe” points to the fonts that are most likely on most users’ computers with limited options – such as Arial, Times New Roman, Georgia, Helvetica, and Verdana. Still, by using these web-safe fonts, you can display your intended font properly on every browser.
We will go back to these web-safe fonts when we discuss fallback fonts later.
Pros – The Benefits of Web Fonts
Why do more website designers use web fonts? Let’s look at some reasons or advantages that web font files offer.
Design and versatility
Web fonts are very helpful in increasing versatility, allowing designers to create and make website design or texts more attractive – a richer custom look – ultimately leading to more brand experience.
Flexibility, readability, and accessibility
Specifically designed for use on the web, web fonts enable the designers to edit the text or whole web design easily – modify style or content to be more readable and legible. They are also highly accessible by search engines, such as Google.
Consistent branding
Those previous advantages, combined with the increasing availability and variety of web fonts, have given many designers (or companies) the ability and creativity to integrate a specific brand personality fully.
The above flexibility also implies that web fonts are more likely to be editable – scalable and zoomable, as well as highly DPI-friendly. It means that designers can create a consistent look and feel (branding) across various mediums.
They can easily show the text or design across all media, ranging from print to online or electronic media (from desktops to tablets to mobile phones) regardless of operating system or device size, as well as the resolution.
Ultimately, web fonts help create a more cohesive users’ (customers’) brand experience.
Cons – The Drawbacks of Web Fonts
Now, what do web fonts have on the flip side?
Rendering speed
On the flip side, one of the biggest drawbacks of web fonts is the instant effect on the overall load times – the rendering speed of your website page.
No control
When you use a third party, like Google, for example, it is more likely that you won’t have any control, especially when their service goes down.
More HTTP requests
It requires you to request additional HTTP to external resources; ideally, you need to keep your HTTP request at a minimum level.
Rendered blocking
Another disadvantage is that web fonts tend to be rendered blocking.
How to Make the Most of Web Fonts in Web Design?
We have already learned about the pros and cons – the benefits and drawbacks – that may come with web fonts.
You can make the most of web fonts in your web design by finding them first, installing them, and looking for fallback fonts as a backup.
Where to find web fonts?
Google – Google Fonts – has become one of the easiest sources for an extensive library of more than 600 web fonts. You can download them for free and use them for your website design or any website you like.
You can also get the most familiar and popular web fonts from many paid services. Some common sites may ring to you, such as MyFonts, Typography.com, FontSpring, FontShop, Fonts.com, and more.
All you need to do is directly download the web font files and install them to your website’s “root” or index files. Only after that can your website run the fonts from a file on its server. Hence, the fonts will be visible regardless of the user’s computer or device.
Also, you can get proprietary or custom web fonts by hosting them via an online hosting platform and linking to them. It requires you to license them first, however.
How to Install Web Fonts
First, you need font files you can load from one of two sources – the visitor’s computer or a web server.
If you use a web server, the web fonts will work with the rule of CSS @font-face. It is a widely supported rule for the CSS stylesheet, allowing you to download any web font from a server and then use it on your web page.
You can do it by declaring the rule of @font-face in the stylesheet. Only after that can you specify the typeface name, location, weight, etc.
Fallback Fonts
You can have this fallback font, especially when a particular third party’s web font is down or an older browser is used. It is the same with the so-called web-safe fonts – the ones that have been readily pre-installed in many operating systems and do not require CSS code to load.
Citing cssfontstack.com, there are the top five sans-serif web-safe fonts you can use for Windows and Mac, namely Arial, Verdana, Trebuchet MS, Tahoma, and Arial Black. Meanwhile, for serif web fonts, those on the top five are Times New Roman, Georgia, Palatino, Lucida Bright, and Garamond.
So, which web fonts should you use?
Regarding the type of web font formats, Can I Use has stated that 97% of web browsers support WOFF2 – Web Open Font Format 2.
It is the latest format with modern fonts and is supported by most web browsers. This format also has better compression – about 30% better than the predecessor, giving you fewer or smaller data to download, therefore, better and faster performance (loading time).
As for old browser support, you can resort to fallback fonts – web-safe fonts – like Arial.
Some people are more likely to use web fonts because they want to break up from viewing the same two or three fonts all over the place – the monotony and ubiquity of common system fonts. Another reason is that perhaps they want to apply their particular corporate font online and thus strengthen branding, not to mention user experience.
Once again, using web fonts is typically a matter of context. One web font may be suitable for one design or project, but it may not be appropriate in other cases.
To sum up, web fonts can make your website more unique and stand out from the crowds, leading to a more memorable brand personality (one of the biggest pros). On the contrary, they may slow down your website (one of the biggest cons).