Introduction to Web Fonts - What are They and How Do You Use Them?

When creating a website, you need to pay attention not only to the quality of the content but also to the selection of fonts you use. This greatly influences the atmosphere of the site. Although there are various ways to assign a font style, one of the most effective ways is to use a 'Web font', using CSS3. By using Web fonts, the range of fonts that can be used for Web content is expanded, which increases the degree of freedom in designing the site. Let's take a look.

The IT Industry Guide is a collection of articles and resources by Internet Academy, Japan's first learning institute specialising in the Web. Here, we introduce you to industry insights in an easy-to-understand manner.

Table of contents

Font basics

There are two main usage categories of fonts - paid and free. However, it is important to remember that "free fonts" are free only in terms of their cost, not licensing.

For example, some fonts may be free for personal use, or for individuals with a hobby, but will have a different licence in case you are using it in a commercial work product.

When using fonts, be sure to check the licence and follow the terms of use. Some fonts require that you attribute the creator, some require that you do not modify the styles, etc. It is essential that you respect the licence description to avoid potential legal complications.

What is a web font?

Web fonts allow designers and developers to use custom fonts that are hosted on Web servers instead of relying on the user's computer.

When a user accesses a Web page that uses web fonts, the web font gets called up and loaded into the browser. The website is then displayed as the designer intended it.

Earlier, these fonts were defined locally. Now, with CSS3, it is possible to declare a web font located on a server with a URL.

Benefits of using web fonts

Standard fonts installed in users' computers differ according to their OS. In CSS2, since the font declaration relied on local data specified in "font-family", if the specified font was not installed on the user's PC, it could not be displayed.

However, since the web fonts module that was introduced in CSS3 has a mechanism to download font data from the specified URL, font designation can be done freely regardless of a user's environment.

Also, one of the merits of web fonts is that they do not break the shape of the letters, even when the display size of Web pages is enlarged or reduced.

In conclusion

It is no exaggeration to say that the font contributes significantly to the overall feel of the website. Using web fonts is effective when you want to have variations in the fonts used on the website.

However, when using web fonts, it is important to keep in mind the font terms and conditions that govern their use.