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.

Baca : 10 Fonts Graffiti Terbaik Download Gratis

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.

Baca : Cara Tambahkan Google Font di Theme WordPress

Daftar Isi

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.

Baca : 7 Font Pilihan Terbaik untuk Desain [Gratis]

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. 🙂

Baca : Cara Memilih Font Tepat Untuk Website Bisnis Anda