CSS system fonts

How to use system fonts in CSS to improve your website and provide users with a better experience in terms of speed and page load time

A bit of history

in order toyear, The website can only use fonts available on all computers, such as Georgia, Verdana, Arial, Helvetica, Times New Roman. There is no guarantee that other fonts can be used on all websites.

If you want to use beautiful fonts, you must use images.

In 2008, Safari and Firefox introduced@font-faceCSS properties and online services began to provide licenses for web fonts. The first was Typekit in 2009, and later it was very popular due to the free Google fonts.

@font-faceIt has been implemented in all major browsers, and now it has been implemented on all reasonably up-to-date devices. If you are a young web developer, you may not realize it, but in 2012, we still have articles introducing this new technology of web fonts.

Nowadays

youwere ableUse any font you want to use by relying on services such as Google fonts, or provide your own fonts for download.

youwere able, butyou should?

If you have a choice (I mean, you did not implement the design your client gave you), you may need to think about it before going back to the basics (but with style!).

The impact of web fonts

Everything you load on the page has acost. This cost is especially important for mobile devices, because every byte required on a mobile device affects the load time and the amount of bandwidth consumed by the user.

The font must be loaded before the content is rendered, so you needwaitIn order to complete the resource loading before the user can even read the single word you wrote.

But web fonts are a way to provideGreat user experienceThrough good typography.

Enter system font

The operating system has excellent default fonts.

System fonts have the following advantagesspeedwithwhich performedwithReduce the size of your web pages.

But the side effect is that they make your website lookvery familiarFor anyone watching it, because they are used to seeing the same fonts every day on a computer or mobile device.

in realityNative font.

This is the system font,Guaranteed to look great.

For example, you may know one of them:

  • GitHub
  • Moderate
  • ghost
  • Bootloader
  • Booking.com

.. They have been using system fonts for many years.

Even Wordpress dashboards that run millions of websites use system fonts, and Medium, which is related to reading, decided to use system fonts.

If it is useful to them, then it is likely to be useful to you as well.

I sold my password

This is the CSS line you should add to your website:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
  "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
}

The browser will interpret all these font names and start with the first font to check if it is available.

Safari and Firefox "block" on macOS-apple-system, Which means that the font of the newer version is San Francisco, and the font of the older version is Helvetica Neue and Lucida Grande.

Chrome uses BlinkMacSystemFont, which defaults to the OS font (again San Francisco on macOS).

Segoe UI is used in modern Windows systems and Windows Phone, Tahoma in Windows XP, Roboto in Android, etc., targeting other platforms.

Arial and sans-serif are fallback fonts.

If you useEmoticonsIn your website, make sure to load the symbol font at the same time:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
  "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
  "Segoe UI Emoji", "Segoe UI Symbol";
}

You may need to change the order of font appearance based on website usage statistics.

Notes onsystem-ui

Maybe you will seesystem-uiThe problem mentioned in the online system font article, but is currently known to cause problems in Windows (seehttps://infinnie.github.io/blog/2017/systemui.htmlwithhttps://github.com/twbs/bootstrap/pull/22377)

Currently working hard to standardize system-ui as a universal font family, so in the future you will only write

body {
  font-family: system-ui;
}

Lookhttps://www.chromestatus.com/feature/5640395337760768withhttps://caniuse.com/#feat=font-family-system-uiFollow the progress at any time. Chrome, Safari have supported it, Firefox has partially supported it, and Edge has not yet implemented it.

Use font variants by creating @font-face rules

The above method is effectivegreatUntil you need to change the font on the second element, you may even need to change multiple fonts.

Maybe you want to specify italics asfontProperty instead offont-style, Or set a specific font weight.

This good project by Jonathan Nealhttps://jonathantneal.github.io/system-font-css/Allows you to use system fonts by importing modules, and can be set

body {
  font-family: system-ui;
}

Thissystem-uiDefined inhttps://github.com/jonathantneal/system-font-css/blob/gh-pages/system-font.css.

Now you can use different font variants by reference:

.special-text {
  font: italic 300 system-ui;
}

p {
font: 400 system-ui;
}

read more

Download mine for freeCSS Manual


More CSS tutorials:


Online technical encyclopedia!