System font stack adalah font / huruf bawaan yg sudah terinstall pada level OS (operating system) seperti Windows, Linux dan macOS.
Apa gunanya untuk website ?
Gunanya adalah mempercepat loading website, karena tidak harus didownload ataupun diloading karena sudah aktif di level OS. Tapi untuk website yg menggunakan font2 tidak standar, mau tidak mau harus menggunakan webfont atau google font, yg notabene akan menambah waktu untuk loading web.
Secara umum ada 3 jenis font dalam system font stack : Sans-serif, Serif dan Mono.
Sedangkan untuk font familynya tergantung dari OS yg digunakan.
Windows System Font Stack
Sans-serif font-family: helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif
Serif font-family: Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
Mono font-family: Consolas, Monaco, Liberation Mono, Lucida Console, monospace
macOS System Font Stack
Sans-serif font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif
Serif font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
Mono font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace
Linux System Font Stack
Sans-serif font-family: Ubuntu, roboto, noto, segoe ui, arial, sans-serif
Serif font-family: Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
Mono font-family: Liberation Mono, Lucida Console, monospace
Cara menggunakan system font stack
Gampang banget tinggal tambahkan CSS di bawah ini, kalau masih ada element yg membutuhkan font bisa ditambahkan sendiri. Lalu nonaktifkan font lainnya, misalnya google font / web font tergantung dari cms yg digunakan.
Jika menggunakan Wordpress bisa menambahan CSS berikut pada theme yg aktif dan install plugin untuk disable google font. Pilihan font bisa disesuaikan dari list font family di atas.
body {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
h1,h2,h3,h4,h5,h6 {font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
Orang IT yang suka masak & baking, photo editing, kadang coding, jagain server sama jalanin toko online plus suka dengan hal2 baru tentang IT
