3 Types of Font Family You Can Use on Websites

People prefer recommended and standard products to avoid any unforeseen issues and choosing the font family for your site is no more an exception to that. With different themes and plugins offering different font sets, it is necessary to do certain compatibility check before choosing any particular font family for your site. In this article, we will explain three different types of font family you can use on your website to create an appealing look for your content.

Types of Font Family

Basically there are three types of fonts available for website owners to choose from:

• Web safe generic fonts
• Google fonts
• Custom font

1. Using Generic Fonts

These are the font families globally recognized and have standardized interpretation. Examples of specific font families include Arial, Times New Roman, Verdana, etc. These fonts are generally installed on any type of operating systems and browsers do not need any external resources to load these font families thus increasing the page loading speed. There will be no compatibility issues across browsers and operating systems when using standard fonts.

If you want to provide better user experience, define the “font-family” attribute in CSS with more than one series. When the browser can’t find the first font family it will look for the second as a fallback, if the second one also fails then it will look for the third one. It is recommended to provide more specific family as a first one and then the generic ones to control the fallback fonts within that family. For example:

p {
font-family: Courier, Georgia, Serif;
}

Here the actual font on the page is Courier and then the fallback is Georgia. In case if both fonts are not found then the generic Serif family fonts will be used to safeguard the readability (instead of other font families like monospace which may completely change the visual look of the site). Serif, Sans-serif, Cursive, Fantasy and Monospace are some of the generic font families.

2. Using Google Fonts

Google fonts are most popular among site owners used to present beautiful content to the users. But it comes with certain hidden cost in terms of privacy and page speed. Most of the themes having typography options offer complete set of 600+ Google font families from which site owners can select different fonts for different elements on the site. For example you can choose “Lato” for navigation menu and “Oswald” for content. The problem here is that the browser needs to download the Google fonts used on a page from the Google’s servers. Based on number of font families used it takes some time to download the font files for local usage.

Some users may also have the habit of clearing browsing data frequently, the font files need to be downloaded every time when the browser is reopened in such a case. Besides the speed Google also tracks the sites using their fonts for statistical purposes. So if you feel this is intruding your privacy then avoid using Google fonts. Google is also blocked in countries like China and the sites using Google fonts may not load forever with the browser showing “waiting for fonts.googleapis.com…” message.

3. Using Custom Fonts

There are also some special font families webmasters should avoid using it on their sites. Symbol font family is one among them and here is why it should not be used on a site. Few days back a user noticed us with the below screenshot of our homepage after we changed the font family from Arial to Symbol.

The page was looking perfectly fine when we checked with Chrome, Firefox and Safari in Mac. But it was showing complete junk of Greek letters instead of the actual content on all Windows based browsers. Reason being that the symbol font family is nothing but the collection of Greek letters and mathematical symbols and does not have global standards to be used on web pages. Based on operating system and browser it is interpreted as Greek letters or actual content. We are writing this as a caution for publishers not to use symbol font family on a site. Also, there could be many other special purpose fonts which site owners should not select without checking the compatibility.

Conclusion

Readability is more important than decoration and hence always try to choose standard font family. This ensures compatibility across all platforms and provides improved user experience with faster page loading. One other way is define multiple font families in style sheet so that when the browser can’t find the first one, the next one will be considered as fallback providing seamless user experience.