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.
Basically there are two types of fonts available for site owners to choose from – generic fonts and Google fonts.
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 the generic font families.
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.
Web Page Calling Google Fonts Through API
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.
Using Special 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.
Symbol Fonts Showing as Greek Letters
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.
Leave a Reply
Your email is safe with us.