Download Now Download Themes Gratis WordPress Responsive!

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

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.

google-font-web

Langkah 2

Anda kemudian akan dibawa ke layar di mana Anda dapat memilih gaya 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 Open Sans.

<head>
  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'  type='text/css'>
</head>

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: 'Open Sans', 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

webfonts google open sans

2. Josefin Slab

webfonts google josefinslab

3. Arvo

webfonts google arvo

4. Lato

webfonts google lato

5. Vollkorn

webfonts google volkorn

6. Abril Fatface

webfonts google abril

7. Ubuntu

webfonts google ubuntu

8. PT Sans + PT Serif

webfonts google pt

9. Old Standart TT

webfonts google old

10. Droid Sans

webfonts google droid

11. Anivers

webfonts google anivers

12. Junction

webfonts google junctions

13. Fertigo

webfonts google fertigo

14. Aller

webfonts google aller

15. Audimat

webfonts google audimat

16. Delicious

webfonts google delicious

17. Prociono

webfonts google prociono

18. Fontin

webfonts google fontin

19. Fontin-Sans

webfonts google fortin sans

20. Chuckfive

webfonts google chunckfives

21. Roboto

font roboto

22. Roboto Slab

webfont google font roboto slab

23. Oswald

oswald

24. Raleway

raleway

25. Source Sans Pro

source-sans-pro

Berikut 25 daftar font terbaik untuk situs web anda, pilih font tersebut untuk membuat situs anda menjadi mengagumkan. Semoga bermanfaat. 🙂

Baca : Cara Memilih Font Tepat Untuk Website Bisnis Anda

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Google+.

10 top hosting!

Register Now: TOP 10 Hosting

Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals

Bluehost Hosting

$2.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

iPage Hosting

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

SiteGround Hosting

$3.45/Month Free Domain, Unlimited Space & Bandwidth Get Host

WebHostingPad

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

Hostgator

$3.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

  • Langkahnya harus dilewati semua atau hanya salah satu saja mas?

Must Read...!
Theme WordPress Storto Responsive Free

Storto adalah theme wordpress responsive gratis yang di buat untuk tujuan blogging. Digunakan untuk...

Panduan Lengkap Tentang Menu WordPress

Navigasi adalah komponen kunci dari setiap website, apakah itu bagian menu front-end maupun back-end...

Close