25 Font Web Terbaik dari Google Font & @Font-face
|25 Font Web Terbaik dari Google Font & @Font-face – Sebagai seorang desainer web, Anda mungkin menyadari pentingnya tipografi. Dengan pertumbuhan jumlah usaha yang terlibat dalam pemasaran konten, pemilihan font menjadi semakin penting.
Selain desain web, yang perlu anda perhatikan adalah dalam penyajian konten, konten yang mengagumkan dan jenis huruf yang digunakan juga mengagumkan maka situs anda akan terlihat lebih hidup dan mempunyai nilai lebih bagi pengunjung. Karena satu tujuan utama Anda sebagai seorang desainer adalah memastikan pengalaman positif bagi pengguna akhir.
Setelah Google merilis Font Web, menjadikan semua hal menjadi lebih mudah dalam menggabungkan tipografi yang indah ke dalam website Anda. Tapi karena banyaknya font yang tersedia di library Google web font, maka saya telah mengumpulkan 25 font terbaik dari Google web font yang semoga memudahkan anda dalam memilih font yang tepat dan anda tidak akan menghabiskan waktu anda dalam pencarian di library Google web font.
Sebelum saya menunjukkan 25 font terbaik dari Google font, silahkan baca terlebih dahulu cara untuk memasang Google webfont di website anda.
Cara Menggunakan Google Web Font
Google Web Font tersedia gratis dan open source. Font yang kompatibel dengan berbagai perangkat, browser dan sistem operasi. Anda tidak perlu membuat account dan Anda tidak dibatasi untuk menggunakan font tersebut dengan cara apapun. Ini jelas salah satu solusi terbaik untuk menambahkan jenis huruf sesuka anda ke situs yang anda miliki.
Langkah 1
Silahkan kunjungi Google Font dan pilih font. Jangan khawatir, Saya akan menyediakan untuk Anda. Setelah Anda memilih font yang cocok, klik tombol Quick Use seperti di tunjukkan pada gambar di bawah ini.
Langkah 2
Anda kemudian akan melihat menu popup muncul di kanan bawah layar di mana Anda dapat memilih style font yang Anda inginkan (light, Bold, Extra-bold, dll) serta set karakter. Setelah itu, Anda akan diberikan sepotong kode yang harus anda tambahkan ke situs Anda. Sebagai contoh ini, saya memilih Roboto.
Langkah 3
Google API akan menghasilkan kode CSS yang diperlukan untuk ditambahkan ke stylesheet Anda. Cukup tambahkan kode yang dihasilkan ke file CSS Anda.
body { font-family: 'Roboto', sans-serif; }
Cara Menggunakan Font dengan @Font-face
1. Pilih font yang favorit Anda dari Font Squirrel.
2. Download @font-face kit dan upload Semua format font ke folder web anda di server.
3. Masukkan kode seperti berikut di file stylesheet anda. Sebagai contoh saya menggunakan font Chunkfive.
@font-face { font-family: 'ChunkFiveRegular'; src: url('Chunkfive-webfont.eot'); src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg'); font-weight: normal; font-style: normal; }
Jika anda sudah paham untuk cara pasang Google web fonts dan @font-face, Sekarang anda bisa melihat 25 font terbaik gratis dari Google web font dan @Font-face.
1. Open Sans
2. Josefin Slab
3. Arvo
4. Lato
5. Vollkorn
6. Abril Fatface
7. Ubuntu
8. PT Sans + PT Serif
9. Old Standart TT
10. Droid Sans
11. Anivers
12. Junction
13. Fertigo
14. Aller
15. Audimat
16. Delicious
17. Prociono
18. Fontin
19. Fontin-Sans
20. Chuckfive
21. Roboto
22. Roboto Slab
23. Oswald
24. Raleway
25. Source Sans Pro
Diatas adalah 25 daftar font terbaik untuk desain situs web anda, pilih font dari daftar diatas untuk membuat situs web anda menjadi mengagumkan, indah dan terlihat profesional. Semoga bermanfaat. 🙂
Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Facebook+.
Register Now: TOP 10 Hosting
Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals
Terima kasih, artikelnya sangat membantu saya menemukan font yang sesuai kebutuhan saya.
Langkahnya harus dilewati semua atau hanya salah satu saja mas?