Why we also need web-safe fonts (why we still need web-safe Fonts)

In the early days of web development, there was no standard font that could be fully implemented across platforms. But there will be some commonly used fonts like Arial, Helvetica and New Roman will be installed in most PCs, these popular system fonts are called Web security fonts. To stick with them in an instance of Web design

But now some changes have taken place and it is safe to use Web fonts. Web fonts are a technique for loading display remote fonts via @font-face, which gives us creative freedom and a wider selection of fonts

@font-face rules have been around for nearly 13 years and have been in IE5.5 for the first time and supported

@font-face is also officially included in the latest version of the CSS (CSS3) Many modern browsers (Chrome Safari IE FireFox) are available to support

It's easy to implement a Web font with some services like the Google Fonts API, such as using Google font to display a relatively unfamiliar font in most browsers (like Bigelow Rules) with just two lines of CSS code

@import URL (http://fonts.googleapis.com/css?family=bigelow+rules); Body {font-family: ' Bigelow Rules ';}

Although @font-face can have close to perfect support and performance but as a good example we still need to use CSS font set not only so our CSS font set also needs to include web security fonts and universal fonts like Sans-serif and serif

For example, even though we are using the most popular fonts in Google's Web font service (Open Sans) We still need to use a CSS font set that contains Web-safe fonts in the last of the font set is a universal font (SANS-SERIF)

Body {font-family: "Open Sans", "Arial", "Helvetica", Sans-serif;}

The order in which the fonts are rendered backwards at Chroem is as follows

Using a good set of fonts, like the one above, prevents our HTML text from having an elegant backward transition when our chosen font cannot be loaded.

Why we still need a web-safe font Set (why we still need a Web-safe font Stack)

Web-safe fonts and CSS font sets seem to be obsolete in the actual use of web pages, especially after @font-face has a good support.

Now close to 90% of users are using browsers that support @font-face

But if you've ever thought about discarding your CSS font set for a few reasons, it might change your mind.

Imperfect fonts (incomplete Fonts)

If a character in a font is not available, the browser will try to display those characters in the next font in your font set, but if you don't have a font set then the browser will use its default font

For example Libre Baskerville font no TM this character

Each of the following examples does not write the CSS font set, while the second one has time New Roman and serif in the CSS font collection

At least if you have this font set, the TM character appears more like a Libre Baskerville font

Network problems (Netword issues)

A network connection is required to load remote fonts via @font-face, and if the network that is responsible for font service is unavailable or temporarily maintained, the browser will use his default font unless you have added a web-safe font to your CSS font set.

The default font for browsers in Chrome is times New Roman

For example, this Web page is designed with a PT Sans font

If you don't have a font set and the network is interrupted then the page will turn into this (Chrome)

The Web page looks completely different because time New Roman greatly affected the information in this design.

But if we use a font set that includes web-safe fonts, we can slowing The problems that this network brings

font-family: "PT Sans", "Helvetica", "Arial", Sans-serif;

@font-face can be closed at customer (@font-face can be turned off client-side)

Some browsers can provide options to prohibit downloading font files

In most cases, it can be confusing to prevent a browser from using remote fonts, but it is possible.

Why would anyone want to prohibit the use of remote fonts in order to speed up the loading of web pages especially for those slow users

To prove the effect of Web page fonts on Web page performance we loaded the following pages with a font called Lobster two

body {font-family: ' Lobster  ' </style>
(The test process is not translated)
Average load time is 1.3 seconds
This means that we have to open this page for 1.3 seconds before we can see the text because Chrome's default behavior is that the font does not display any text when it is loaded
Use broadband to download font files from Google Server on average 1.3 seconds think about how long it will take to load in a less-than-ideal environment, such as using a cellular network or sharing a network
It takes 0.012 seconds to load the same page without using a network font. This means that the font's impact load time is 10,733% to display a novelty font in a page content that is not very important, which is undoubtedly a huge price. This is why some users prohibit the use of remote loading of font files
If we want to minimize the impact on our web design, we should use web-safe fonts in the font set if the user chooses to disallow the loading of remote font files.
Web-Safe Fonts = inexpensive, simple to achieve graceful performance degradation (web-safe Fonts = Cheap and easy Graceful degradation)
Although there are few browsers that do not support @font-face, especially some older browsers
I've mentioned earlier that 90% of users are using a browser that supports @font-face
A font set that does not include web-safe fonts and universal fonts means that we will lose at least 10% of the users
Writing a simple set of fonts that includes web-safe fonts requires very little time and effort, so there's no reason why we don't keep doing this.
Transfer from http://sixrevisions.com/web-standards/why-we-still-need-web-safe-fonts/
If there is an error welcome correction:)
Why we also need web-safe fonts (why we still need web-safe Fonts)