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
- Nowadays
- The impact of web fonts
- Enter system font
- Popular websites use system fonts
- I sold my password
- Use font variants by creating @font-face rules
- read more
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-face
CSS 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-face
It 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.
Popular websites use system fonts
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-ui
The 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 asfont
Property 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-ui
Defined 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
- https://css-tricks.com/snippets/css/system-font-stack/
- https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
- https://medium.design/system-shock-6b1dc6d6596f
Download mine for freeCSS Manual
More CSS tutorials:
- Flexbox guide
- CSS grid tutorial
- CSS variables (custom attributes)
- Introduction to PostCSS
- CSS guarantees metallicity
- How to center an element using CSS
- CSS system fonts
- How to print HTML with styles
- Getting started with CSS transition
- CSS animation tutorial
- Introduction to CSS
- CSS guide
- How to set up Tailwind with PurgeCSS and PostCSS
- Tail wind cheat sheet
- How to continuously rotate an image using CSS
- Use CSS to make the table responsive
- How to debug CSS by halving
- CSS selector
- CSS cascade
- CSS specificity
- CSS attribute selector
- CSS colors
- CSS Unit
- CSS url()
- CSS typography
- CSS Box model
- CSS position properties
- CSS media queries and responsive design
- CSS function query
- CSS conversion
- How to style a list with CSS
- CSS vendor prefix
- CSS inheritance
- CSS pseudo-classes
- CSS pseudo elements
- Style HTML tables with CSS
- CSS Display property
- CSS calc() function
- CSS border
- Use @import to import CSS files
- CSS error handling
- CSS filter
- CSS Box size
- CSS background
- CSS comments
- CSS fonts
- CSS padding
- CSS float property and clear
- CSS normalization
- CSS z-index property
- How to disable text selection using CSS
- How to use CSS to place items at the bottom of their container
- How to invert colors using CSS
- Responsive front tags in CSS
- Responsive YouTube video embedding
- What is a good CSS breakpoint value for responsive design?
- How to align the center in Flexbox