Web safe fonts and web fonts (Web Fonts)

What is a web safe font

Web-safe fonts are fonts that are pre-installed by many operating systems. While not all systems have the same fonts installed, you can use a web-safe font stack to select several fonts that look similar and install them on the various systems you want to support. If you want to use a font other than the pre-installed fonts, starting with CSS3 you can use Web fonts – Learn web development | MDN.

Web safe fonts are fonts that are pre-installed by many operating systems. While not all systems have the same fonts installed, you can use a web safe font stack to choose several fonts that look similar, and are installed on the various systems that you want to support. If you want to use fonts other than ones pre-installed, as of CSS3, you can use Web Fonts.

  • English Web Safe Font Collection CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.

No web-safe Chinese font

Compared with English fonts that are usually only tens of KB, loading a GB2312 Chinese font on a web page requires at least 2 MB more loading, and most Chinese fonts are more than 5 MB. Therefore, web fonts have not become popular in China, and we still need to use web-safe fonts just like English web pages did many years ago.

You can see the preset Chinese fonts for each system in the table below – each system does not have the same fonts at all, that is, there is no web-safe Chinese font!

System Preset Chinese font
Mac OS Regular script: STKaiti Chinese Song style: STSong Chinese imitation Song style: STFangsong
Windows Microsoft YaHei: Microsoft YaHei (starting with Windows 7) Height : SimHei Song style: SimSun New Song style: NSimSun FangSong Style: KaiTi Style style GB2312: FangSong_GB2312 Style style GB2312: KaiTi_GB2312
Android Droid Sans Fallback
iOS Ping Fang (starting with iOS 9) Heiti: Heiti SC (iOS 8) Chinese Heiti: STHeiti ( iOS 7.0 and below)

What are web fonts

Unlike web-safe fonts, web fonts are not pre-installed on the user’s system. These fonts are downloaded by the user’s browser when rendering a web page and then applied to your text. The main disadvantage of using web fonts is that it can slow down your website’s loading time. There is also limited support for CSS3 in older browsers, which is required to use web fonts. The latter limitation can be compensated by using a font stack, similar to a web-safe font stack, but including a web font as the first font in the stack. If the browser cannot use web fonts, it falls back to web-safe fonts in the stack.

Unlike web safe fonts, web fonts are not pre-installed on the user’s system. The fonts are downloaded by the user’s browser while rendering the webpage, and then applied to your text. The main drawbacks of using web fonts is it will slow your site’s load time. There is also limited support for CSS3 in older browsers which is required to use web fonts. The later limitation can be remedied by using a font stack, similar to the web safe font stacks, but including a web font as the first font of the stack. If a browser is unable to use the web font it will fall back on the web safe fonts in the stack.

Web Fonts is a CSS feature that allows us to specify font files that are downloaded with your website when visited, meaning that any browser that supports Web Fonts can use the specified fonts. The required syntax is as follows:

First, there is a @font-face block at the beginning of the CSS that specifies the font file to download:

@font-face {
  font-family: "myFont";
  src: url("myFont.ttf");
}

Below this, you can apply your custom font to anything you like using the font kind name specified in @font-face, for example:

html {
  font-family: "myFont", "Bitstream Vera Serif", serif;
}

There are two important things to note about web fonts:

  1. Browsers support different font formats, so multiple font formats are needed for good cross-browser support. For example, most modern browsers support WOFF / WOFF2 (Web Open Font Format versions 1 and 2, Web Open Font Format versions 1 and 2), which is the most efficient format, but older versions of IE only support EOT (Embedded Open Type , embedded open type) fonts, you may want to include an SVG version of the font to support older iPhone and Android browsers.
  2. Fonts are generally not freely available. We must pay for them, or follow other licensing conditions, such as providing font creator identification in the code (or on the site). You should not steal fonts without proper authorization.

Font type-common font families

serif serif font family

serif is a font family that has small decorative horizontal lines called “serifs”. Serif fonts are often used in printed materials such as books, magazines, newspapers, etc. because their serifs enhance the readability and legibility of the font. Common serif fonts include Times New Roman, Georgia, and Garamond.

sans-serif sans serif font family

sans-serif is a font family without decorative dashes. This font is commonly used on digital screens such as computers, mobile phones, and televisions. Compared to Serif fonts, Sans-serif fonts look more modern and cleaner. Common Sans-serif fonts include Arial, Helvetica, and Verdana.

monospace monospace font family

monospace is a family of equal-width fonts, with each character occupying the same width. Monospace fonts are commonly used in computer programming, printer output, and other applications that require aligned text. Common Monospace fonts include Courier, Consolas, and Monaco.

cursive handwriting font family

cursive is a font family that emulates handwriting, with curvy, smooth lines. This font is usually used by designers, artists, and stationery enthusiasts when they need to express their personality and artistic sense. Common Cursive fonts include Brush Script, Lucida Calligraphy, and Comic Sans.

fantasy fantasy font family

Fantasy is an artistic and unique font family that is often used in posters, book covers, and advertisements. The shape of this font is often interesting, quirky, peculiar or decorative, often containing decorative patterns or patterns. Common fantasy fonts include Harrington, Viner Hand ITC, and Zapfino.

Script handwritten font family

The Script font family is a type of font that is usually designed to simulate handwriting or hand-drawing and create a natural, casual artistic atmosphere. This type of font often features irregular strokes, smooth curves, and variable letter spacing, making the text appear to be handwritten rather than typed. The Script font family has a wide range of applications, such as print design, logo design, advertising design, etc. Common Script fonts include Brush Script, Lobster, Pacifico, Vibur, etc.

Summary

In order to ensure that Chinese characters are displayed correctly on different computers and browsers, web designers or developers can consider:

  1. Use font libraries provided by web service providers: Service providers such as Google Fonts and Adobe Fonts provide many Chinese and English font libraries. These fonts can be directly referenced by web pages and can be displayed normally without the need for users to install fonts.
  2. Use images or vector graphics: Convert Chinese characters to images or vector graphics and embed them into web pages. While this method ensures that characters are displayed correctly across different browsers and computers, it has the disadvantage of not being able to perform operations such as text search and copy-paste.
  3. Reference multiple fonts: If the designer wants to use multiple Chinese fonts in the web page, multiple alternative fonts can be specified in the CSS style sheet. For example: font-family: “宋体”, “SimSun”, “Microsoft YaHei”, “Microsoft YaHei”, sans-serif;

It’s important to note that while some fonts look great in design, they are not necessarily suitable for use as web-safe fonts. Designers or developers need to weigh the appearance and usability of the font and choose the Chinese web-safe font that best suits their needs.

reference

  • Web fonts – Learn web development | MDN
  • CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.
  • Chinese web font settings | inDev. Journal
  • serif, sans-serif, monospace, cursive and fantasy – Tencent Cloud Developer Community – Tencent Cloud