Also, read this wonderful article from on their journey of implementing system fonts. There are web-safe fonts (which are old and outdated), Web fonts (like Google Fonts and Adobe Typekit/Adobe Fonts), self-hosted web fonts and finally, system fonts. Other than system fonts, all other types of font stack require some downloading by the browser. System fonts are first-class citizens on their OSes. They are beautiful, well optimised and exceptionally designed for modern-day, high-resolution screen usage. Like, the San Francisco font present in macOS and Roboto font in Android OS. These fonts load instantly on a browser as they don't require any downloading time. System fonts are the default fonts of a particular operating system.They are like web-safe fonts but designed for modern-day, high-resolution screen usage.No download required by the browser to paint your website text.ĭid you know? Web fonts on an average take up around 5-7 per cent of a typical website total weight.It seems to be small, but every small optimization counts towards your overall website speed and user experience.īefore getting into how to use the system font stack on your website or WordPress, you should also know some negatives (small bug) of using them. As these fonts very much depend on the browsers builds, sometimes they mess up. Recently, Chrome 81 web browser on macOS broke the bold weight of system font stack. It got fixed in the subsequent Chrome 83 version. But, for a short period of 1-2 months, any website using the system font (especially using the bold weight for headings and text bold) looked plain or weird without any boldness applied. Here is a simple chart of different system fonts found in each operating system. Do note that they tend to change (less frequently) when a new version of an operating system comes out. Safari on macOS and iOS, Firefox on macOSĬhrome, Safari and Firefox on macOS, Chrome on Windows (latest OS) So make sure to keep a check on your websites system font stack. How to use System font on website and WordPress
0 kommentar(er)
