Belajar Web-Safe Font HTML, CSS dan Penjelasan System Font
Salah satu pekerjaan rumah yang sangat besar ketika mengelola sebuah blog maupun website adalah memilah font yang cocok dan enak dibaca untuk pengunjung nantinya. Namun, penggunaan font yang sangat banyak akan mengurangi kecepatan loading blog
Seperti postingan kang adhy di blog kompiajaib tentang System font sebagai salah satu cara mengatasi dan mengurangi loading blog.
Apa itu font Web-Safe?
Font Web-Safe adalah font yang dapat menyesuaikan dengan browser apa pun di perangkat apa pun. Dengan menggunakan jenis font ini, desainer dan pengembang web memastikan bahwa font yang dimaksud akan selalu ditampilkan dengan benar di halaman web, bahkan jika font ini tidak terpasang di komputer pengguna, karen ini sudah menjadi default pada setiap browser modern saat ini.
Sebelum adanya font Web-Safe, jika pengguna tidak memiliki font situs web tertentu yang terpasang di komputer mereka, browser mereka akan menampilkan font generik sebagai cadangan, seperti Times New Roman.
Akibatnya, kita tidak tahu bagaimana halaman web kita muncul pada pengguna akhir. Jika konten halaman tidak sempurna menyesuaikan dengan font yang berbeda, pengguna dapat mengalami masalah fungsionalitas dan desain.
Web-safe font memecahkan masalah ini dan sekarang menjadi stKamur dalam desain web. Dengan memilih font yang aman untuk web, Kamu dapat yakin bahwa teks Kamu akan selalu muncul sesuai yang diinginkan. Mari kita lihat jenis-jenis font yang berbeda.
Macam-macam Jenis Font
Untuk Web-Safe font, Kamu dapat menggunakan font serif, sans-serif, monospace, cursive, fantasy, dan MS .font serif, sans-serif, monospace, cursive, fantasy, dan MS
- Serif - Font ini mengandung serif - garis hias kecil yang menjulur dari badan utama huruf. Font serif lebih mudah dibaca dalam format cetak fisik, karena serif memimpin mata penonton dari karakter ke karakter. Times New Roman adalah font serif.
- Sans-Serif - Font ini tidak memiliki serif. Font sans-serif lebih mudah dibaca di layar, sehingga lebih umum digunakan dalam salinan situs web. Arial adalah font sans-serif.
- Monospace - Istilah ini merujuk pada font yang memiliki jarak yang sama antar karakter. Courier adalah font monospace.
- Cursive - Font ini menyerupai tulisan tangan. Brush Script MT adalah font cursive.
- Fantasy - Font fantasy sangat bergaya dan dekoratif. Luminari adalah font fantasy.
- MS - MS dalam nama font merupakan singkatan dari Microsoft. Ini menunjukkan bahwa Microsoft membuat font ini untuk perangkat digitalnya. Trebuchet MS adalah salah satu contohnya.
Mari kita lihat beberapa font Web-Safe terbaik yang dapat Kamu gunakan.
Web-Safe Fonts HTML and CSS
Setidaknya ada dua puluh satu Web-Safe yang sangat sering digunakan pada sebuah website :
- Helvetica (sans-serif)
- Arial (sans-serif)
- Arial Black (sans-serif)
- Verdana (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Impact (sans-serif)
- Gill Sans (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Palatino (serif)
- Baskerville (serif)
- Kamulé Mono (monospace)
- Courier (monospace)
- Lucida (monospace)
- Monaco (monospace)
- Bradley Hand (cursive)
- Brush Script MT (cursive)
- text_paragraph
- Luminari (fantasy)
- Comic Sans MS (cursive)
Untuk penulisannya pada blog maupun template kamu, kamu bisa menuliskannya sebagai berikut:
body { font-family: Verdana, sans-serif }Cobalah: Font HTML Serif
Berikut adalah beberapa font serif yang dapat Kamu sisipkan melalui CSS sebaris:
Times New Roman: font-family: 'Times New Roman', serif;
Georgia: font-family: 'Georgia', serif;
Palatino: font-family: 'Palatino', serif;
Baskerville: font-family: 'Baskerville', serif;Cobalah: Font HTML Sans-Serif
Berikut adalah beberapa font sans-serif yang dapat Kamu sisipkan melalui CSS sebaris:
Helvetica: font-family: 'Helvetica', sans-serif;
Arial: font-family: 'Arial', sans-serif;
Arial Black: font-family: 'Arial Black', sans-serif;
Verdana: font-family: 'Verdana', sans-serif;
Tahoma: font-family: 'Tahoma', sans-serif;
Trebuchet MS: font-family: 'Trebuchet MS', sans-serif;
Impact: font-family: 'Impact', sans-serif;
Gill Sans: font-family: 'Gill Sans', sans-serif;Cobalah: Font HTML Monospace
Berikut adalah beberapa font monospace yang dapat Kamu sisipkan melalui CSS sebaris:
Kamulé Mono: font-family: 'Kamulé Mono', monospace;
Courier: font-family: 'Courier', monospace;
Lucida: font-family: 'Lucida', monospace;
Monaco: font-family: 'Monaco', monospace;Cobalah: Font HTML Kursif dan Fantasi
Berikut adalah beberapa font kursif dan fantasi yang dapat Kamu sisipkan melalui CSS sebaris:
Bradley Hand: font-family: 'Bradley Hand', cursive;
Brush Script MT: font-family: 'Brush Script MT', cursive;
Luminari: font-family: 'Luminari', fantasy;
Comic Sans MS: font-family: 'Comic Sans MS', cursive;JSfiddle : Coba sendiri secara langsung
Saat Kamu memindai Web-Safe web ini, Kamu mungkin melihat beberapa pengecualian untuk penggunaan. Kamu mungkin juga memiliki font yang sudah Kamu sukai dan gunakan untuk merek Kamu yang tidak ada dalam daftar ini.
Membuat Cadangan Fonts
Tumpukan font CSS memungkinkan Kamu memberikan beberapa cadangan font ke browser. Dan itu bukan hanya cadangan jika terjadi kegagalan teknis atau server. Misalnya, pertimbangkan pengguna yang tidak menyukai font default sistem dan menghapusnya dari sistem operasi mereka. Kamu tidak bisa mengendalikannya, jadi lebih baik aman.
Untuk mengatasi masalah ini, CSS memungkinkan Kamu untuk menambahkan daftar font cadangan serupa di tumpukan font. Tumpukan font meningkatkan kompatibilitas universal situs Kamu dengan berbagai browser dan sistem operasi. Jika font pertama tidak berfungsi, browser akan mencoba font berikutnya di tumpukan, dan seterusnya.
Untuk membuat kumpulan font, tambahkan beberapa nama font terkait ke properti font-family. Urutkan font Kamu berdasarkan prioritas — font yang paling Kamu inginkan akan muncul terlebih dahulu, dan keluarga font umum harus mengakhiri daftar. Ini contohnya:
body { font-family: "Playfair Display", "Didot", "Times New Roman", Times, serif; }Ini semua adalah font serif, memastikan pengalaman tetap konsisten. Atau Kamu dapat menggunakan jenis font lain di tumpukan font Kamu.
Apakah saya perlu mengunduh Web-Safe web untuk menggunakannya dalam kumpulan font?
Tidak. Karena font ini aman untuk web, tidak perlu mengunduh file font. Saat Kamu menentukan font ini di tumpukan font Kamu, browser Kamu akan dengan cepat mengenali font yang Kamu rujuk dan menampilkannya kepada pengunjung situs Kamu.
System Font
Ternyata penggunaan system font juga sudah digunakan web-web besar seperti
Github, Bootstrap, dan lainnya. Namun ini belum begitu familiar di telingan
para developer dan blogger. Kita cukup menambahkan
font-family pada body dan pada element lainnya tinggal mengatur
font-size dan font-weight.
body {
font-family: -apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;
}Dengan itu maka browser akan otomatis mendeteksi font yang digunakan oleh system dari perangkat yang digunakan user.
Penjelasannya seperti berikut ini:
- -apple-system (San Francisco) >> iOS Safari, macOS Safari, macOS Firefox
- BlinkMacSystemFont (San Francisco) >> macOS Chrome
- Segoe UI >> Windows
- Oxygen / Oxygen-Sans >> KDE
- Ubuntu >> Ubuntu
- Cantarell >> GNOME
- Helvetica Neue >> macOS versions 10.11
Namun jika user meng-install font Roboto pada Windows maka di Windows akan tampil sebagai font Roboto. Namun, menurut saya ini kurang konsisten aja, karena tidak semua browser support dan juga tidak pula setiap browser memiliki cara yang sama dalam membaca kode.
Maka dari itu saya masih merekomendasikan kamu menggunakan Safe-Web font sebagai alternatif font tanpa harus repot mengecek di setiap perangkat maupun browser. Karena dari percoabaan saya, menggunakan System Font ini sering kurang konsisten tampilannya ketika dibuat di browser Chrome Maupun Firefox.
Contoh Penerapan Pada Template LinkMagz
Untuk kamu pengguna template linkmagz, maupun template blogger lainnya mungkin caranya akan kurang lebih sama, yang membedakan hanya cara penulisannya saja, namun ini bisa menjadi contoh yang lebih efektif untuk bisa di praktekan.
Pada template linkmagz itu biasanya akan tertulis seperti berikut:
html{font:$(body.font)}body{background:$(body.background);color:$(body.text.color);font-family:Roboto,Arial,sans-serif}.buttonDownload{background:$(body.link.color)}a:link,.toc button{text-decoration:none;transition:all .2s;color:$(body.link.color)}a:visited{color:$(body.link.visited.color)}a:hover{color:$(body.link.hover.color)}#sidebar-wrap a:link{color:$(sidebar.link.color)}
Yang perlu kamu tandai adalah kode
font-family:Roboto,Arial,sans-serif, karena kode tersebut yang
akan kita ganti menjadi seperti berikut:
html{font:$(body.font)}body{background:$(body.background);color:$(body.text.color);font-family: -apple-system,BlinkMacSystemFont,"Gill Sans","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;}.buttonDownload{background:$(body.link.color)}a:link,.toc button{text-decoration:none;transition:all .2s;color:$(body.link.color)}a:visited{color:$(body.link.visited.color)}a:hover{color:$(body.link.hover.color)}Seperti pada artikel saya kali ini, saya mencoba membuat tingkatan pada font yang kita gunakan pada template blog, dimana saya disini mengupayakan Gill Sans menjadi pilihan utama untuk ditampilkan sebagai font, dan selanjutnya diikuti oleh Segoe UI jika memang nanti Gill Sans gagal dipanggil oleh browser, dan terus berlanjut seperti itu.
Penutup
Artikelnya menjadi lebih panjang dan sudah saya coba lebih ringkas dari beberapa referensi yang saya dapatkan, untuk penggunaan font tentunya masih menjadi pilihan secara pribadi, jika kamu tidak suka ribet ngatur font saya masih merekomendasikan menggunakan Web-Safe sebagai alternatifnya.
Karena memang dari pengalaman saya, semua browser modern saat ini sudah sangat pintar dan juga didukung dengan koneksi internet saat ini sudah sangat baik. Jadi, tidak ada masalah jika memang kamu ingin menggunakan font dari Google Fonts,.
- https://blog.hubspot.com/website/Web-Safe-html-css-fonts
- https://www.kompiajaib.com/2018/04/penggunaan-system-font-sebagai-solusi.html
Posting Komentar