Cara Memandu Untuk Menggunakan Google Font Dengan Google Dan Plugin!

Jika Anda seorang desainer, Anda cenderung mempertimbangkan tipografi sebagai dasar dari desain situs web apa pun. Tidak hanya memilih font tetapi juga memberikan keunggulan untuk keterbacaan halaman web.

Apa itu Tipografi?
Tipografi adalah semua tentang memilih panjang garis, ukuran titik, spasi baris, tipografi dan menyesuaikan spasi antara kelompok huruf.

Mengapa Google Font merupakan pilihan yang jelas?
Ada kalanya internet memiliki font standar yang akan membuat siapa pun bosan melihatnya, tetapi seiring berjalannya waktu, desainer dan pengembang web terpaksa membatasi pilihan font teks langsung mereka dan mendesain font yang kompatibel dengan jumlah pengguna terbanyak selama ini. Internet. Mereka datang dengan CSS3. Typekit memulainya.

Typekit mengembangkan beberapa font menarik yang membantu desainer memilih font yang menarik dan ramah pengguna untuk halaman web mereka, tetapi satu-satunya masalah dalam menggunakan Typekit adalah biaya yang mereka kenakan kepada penggunanya.

Harganya $49 dan jika seorang desainer ingin mengembangkan dua situs, dia harus membayar $99 hanya untuk menggunakan font di halaman web. Terima kasih kepada Google yang datang dengan desain font yang brilian dan menawarkannya secara gratis.

Cukup jelas bahwa Anda tidak mendapatkan gratis apa yang bisa Anda dapatkan dengan uang tetapi percayalah, Google Web Fonts tetap saja daripada yang ditawarkan oleh Typekit. Tentu saja, font Google Web adalah yang terbaik ketika Anda tidak suka menghabiskan terlalu banyak untuk font karena Anda tahu membangun seluruh situs web membutuhkan biaya terlalu banyak.

Google Font dan Kustomisasinya:
Sampai hari ini, ada lebih dari 647 font keluarga font terpisah di perpustakaan Google. Saat Anda memilih font untuk konten situs web Anda, sangat penting untuk melihatnya dengan cara yang mirip dengan bagaimana Anda akan menerapkan font itu. Beberapa font terlihat sempurna untuk konten tubuh tetapi mengerikan sebagai heading.

Untungnya, Google Web Fonts memungkinkan Anda menyesuaikan pratinjau agar sesuai dengan kasus penggunaan Anda. Anda dapat memasukkan teks pratinjau khusus, dan mengubah ukuran pratinjau sesuai keinginan. Penting untuk melihat pratinjau header atau body copy yang akan Anda gunakan dalam tampilan paragraf dan jika, Anda memiliki banyak body copy, jangan gunakan terlalu banyak font kustom.

Menyalurkan Font yang Tepat!
Karena kami menyadari lebih dari enam ratus jenis font yang harus disaring, menjadi sulit untuk memfilter dan memilih yang tepat hanya dengan menggulirnya satu per satu. Jadi, gunakan langkah-langkah di bawah ini untuk mengasah apa yang Anda butuhkan untuk situs web Anda:

• Lihat sekilas font yang baru-baru ini diperbarui oleh Google. Kemungkinan Anda akan mendapatkan font yang sedang tren dan bebas bug tanpa harus melihat font lainnya. Juga, lihat font yang digunakan oleh sebagian besar desainer dan pengembang. Melakukan hal ini akan memungkinkan Anda mengetahui font serbaguna yang dapat Anda gunakan dalam berbagai gaya dan lebar.
• Jika Anda mengetahui jenis huruf untuk situs web Anda, karakteristik dan gaya font dapat meningkatkan hasil Anda seperti jika Anda menginginkan font tulisan tangan, nonaktifkan semua jenis hasil lainnya.
• Google memungkinkan Anda untuk mempersempit pencarian font Anda lebih lanjut dengan menambahkan ketebalan, kemiringan dan lebar karakter sebagai opsi pemfilteran. Bukankah itu fitur keren untuk mendapatkan font terbaik untuk situs web Anda?

Memilih font
Google memiliki berbagai metode untuk memilih dan kemudian menerapkan font sesuai dengan kebutuhan pemilik situs web. Tidak ada yang benar atau salah di sini. Apa pun yang terbaik untuk Anda, Anda akan mendapatkannya. Ini mendukung tiga tombol untuk membantu Anda memilih font yang tepat:

• Penggunaan Cepat: Untuk melihat font yang Anda suka dengan cepat.
• Pop out: Untuk mengetahui lebih banyak tentang font yang Anda sukai yaitu fungsi dan kegunaannya.
• Koleksi: Jika Anda ingin menggunakan lebih dari dua font, Koleksi adalah tombol yang perlu Anda klik. Ini akan menambahkan semua font yang Anda suka pada satu halaman.

Bagaimana Cara Menggunakan Font Google?
Setelah Anda memilih font yang ingin Anda gunakan di halaman web Anda, Anda dapat mengklik tab "Gunakan" untuk melihatnya beraksi. Sekarang, ketika Anda yakin tentang font, yang Anda butuhkan hanyalah menyalin dan menempelkan beberapa kode di halaman web Anda. Anda akan mendapatkan tiga opsi untuk dipilih:

Standar:
Ini adalah tautan stylesheet standar. Anda perlu menempatkannya di bagian kepala file HTML Anda, sehingga menghemat langkah menambahkan aturan @import karena Anda menambahkan secara signifikan dalam stylesheet yang sudah memilikinya. Contoh:

CSS:
Gunakan aturan CSS @import jika Anda tidak ingin menautkan ke stylesheet yang dibuat secara otomatis di header Anda. Gunakan kode di bawah ini untuk mengintegrasikan font ke CSS Anda:

font-family: 'Henry Pigeous', serif;
font-family: 'Diplomatic'. cursive;

JavaScript
Google dan Typekit, keduanya mengembangkan kode ini di sini sebagai bagian dari pemuat WebFont untuk memberi pengguna lebih banyak kontrol atas pemuatan font.

Ambil cuplikan HTML dan letakkan di dekat header HTML sebagai:

Judul halaman

Langsung ke CSS dan ikuti ini:

h1 {
font: 400 45px/0.5 'Diplomatic', Arial, sans-serif;
}
p {
font: 400 14px/1.5 'Henry Pegasus', Times, serif;
}

Dengan Bantuan Plugin!
Ada beberapa plugin yang tersedia yang menawarkan integrasi Google Font tanpa batas. Menggunakan Plugin memiliki keterbatasan seperti plugin tidak akan tahu untuk mencari teks tertentu tanpa menyesuaikan lebih lanjut dengan bantuan HTML atau CSS. Tapi tetap saja, berikut adalah beberapa plugin untuk memasukkan font Google ke situs web Anda.

1. Plugin Font

Ini adalah cara mudah dan efektif untuk memasukkan font Google ke situs web Anda hanya dengan beberapa klik. Anda dapat menggunakan stylesheet Anda atau menggunakan gaya CSS; keduanya akan bekerja untuk menyesuaikannya dengan tema Anda. Anda dapat melakukannya dari area admin atau stylesheet situs web Anda. Plugin Font adalah semua yang Anda butuhkan untuk situs web Anda, dengan cepat dan efisien.

2. Font Google Mudah

Dengan plugin Easy Google Fonts, Anda tidak perlu menyentuh kode apa pun untuk mendapatkan font di situs web Anda. Dari memilih hingga mengoptimalkan dan memberi warna unik untuk hidup hingga pratinjau, segala sesuatu dengan font dapat dilakukan menggunakan Easy Google Fonts.

3. TK Google Font

TK Google Fonts akan menambahkan 291 font Google Web ke dalam panel editor visual Anda saat Anda mengembangkan halaman atau posting. Cukup instal dan mulai gunakan.

Memasang Plugin Di Atas:

• Masuk ke Administrator WordPress
• Klik "Plugin"
• Klik “Tambah Baru”
• Ketik nama plugin di sudut kanan atas dan klik "instal sekarang"

Untuk Menyesuaikan Plugin

• Klik "Tampilan" dan kemudian klik "Sesuaikan".
• Klik "Kunjungi Situs" dan kemudian "Sesuaikan"
• Anda akan melihat menu tambahan baru sebagai "Tipografi"

Terapkan Pembelajaran!
Kami berharap, membaca artikel ini adalah pelajaran pembelajaran untuk digunakan, dan sekarang, saatnya untuk menggunakan pengetahuan ini di situs web Anda. Jelajahi berbagai font, plugin untuk meningkatkan tipografi di situs web Anda. Ingatlah bahwa jika Anda menyesuaikan font, itu akan lebih bermanfaat daripada hanya menyalin dan menempelkan font. Beri tahu kami font dan metode yang Anda gunakan untuk menambahkan tipografi untuk memikat audiens Anda dalam proyek Anda.

Font meningkatkan bentuk estetika situs web dan merupakan dasar dari desain situs web apa pun. Font atau tipografi adalah tentang memilih panjang garis, ukuran titik, spasi baris, tipografi dan menyesuaikan spasi di antara huruf-huruf grup.

Sebagai seorang desainer, selalu baik untuk mempersempit pencarian font Anda lebih lanjut dengan menambahkan ketebalan, kemiringan dan lebar karakter sebagai opsi pemfilteran. Tidak semua font terlihat bagus di badan dan/atau konten heading.

Beberapa font tidak terlihat bagus sebagai heading dan yang lainnya tidak dapat dibaca dengan mudah pada konten isi. Oleh karena itu, disarankan untuk melihat font yang Anda pilih dengan cara yang mirip dengan bagaimana Anda akan menerapkannya sehingga Anda dapat menguji keterbacaannya.

Lewatlah sudah hari-hari ketika internet dulu memiliki font standar membosankan yang sama. Teknologi canggih dan desainer dan pengembang web dipaksa untuk merancang font yang kompatibel dengan jumlah pengguna terbesar melalui internet.

Mereka datang dengan CSS3. Typekit memprakarsainya dan mengembangkan beberapa font yang menarik dan menarik untuk digunakan oleh desainer web. Tapi, mereka terlalu mahal. Untungnya, Google datang untuk menyelamatkan dan menawarkan desain font yang brilian dan ramah pengguna secara gratis.

Menyalurkan Font yang Tepat!

Saat ini, jumlah font di perpustakaan google mencapai 647, sehingga sulit untuk memfilter dan memilih yang tepat. Namun, dengan 3 langkah ini, Anda bisa mendapatkan apa yang Anda butuhkan untuk situs web Anda:

• Lihatlah font yang baru saja diperbarui di google dan dapatkan font yang sedang tren dan bebas bug. Juga, cari font yang digunakan oleh sebagian besar desainer untuk memungkinkan Anda mengetahui tentang fleksibilitas font yang dapat Anda gunakan dalam berbagai gaya dan lebar.
• Ketahui jenis huruf untuk situs web Anda, karakteristik, dan gaya font untuk meningkatkan hasil Anda.
• Sempurnakan pencarian font Anda dengan menambahkan ketebalan, kemiringan, dan lebar karakter sebagai opsi pemfilteran.

Memilih Font

Tergantung pada kebutuhan Anda, Google memiliki beberapa metode untuk membantu Anda memilih font. Untuk memilih font yang tepat, pertimbangkan:

Akses cepat-Untuk melihat font yang Anda suka dengan cepat

Pop Out- Untuk mengetahui lebih banyak tentang font, yaitu fungsionalitas dan kegunaan

Koleksi-Jika Anda ingin menggunakan lebih dari dua font, klik tombol ini. Ini akan menambahkan semua font yang Anda suka pada satu halaman.

Cara Menggunakan Google Font

Setelah Anda memilih font pilihan Anda, klik pada tab 'Gunakan' untuk melihatnya beraksi. Kemudian, salin dan tempel beberapa kode di halaman web Anda. Anda akan mendapatkan tiga opsi untuk dipilih:

Standar -Ini adalah tautan stylesheet standar. Tempatkan di bagian kepala file HTML Anda. Ini akan menghemat langkah Anda untuk menambahkan aturan @import karena Anda menambahkan secara signifikan dalam stylesheet yang sudah memilikinya.

CSS -Gunakan aturan CSS @import jika Anda tidak ingin menautkan ke stylesheet yang dibuat secara otomatis di header Anda . Gunakan kode di bawah ini untuk mengintegrasikan font ke CSS Anda:

font-family: 'Henry Pigeous', serif;
font-family: 'Diplomatik'. kursif;

JavaScript -Google dan Typekit, keduanya mengembangkan kode ini di sini sebagai bagian dari pemuat Font Web untuk memberi pengguna kontrol lebih besar atas pemuatan font .

Ambil cuplikan HTML dan letakkan di dekat header HTML sebagai:

Judul halaman

Langsung ke CSS dan ikuti ini:

h1 {

font: 400 45px/0.5 'Diplomatik', Arial, sans-serif;

}

P {

font: 400 14px/1.5 'Henry Pegasus', Times, serif;

}

Tentang Penulis:
Catherrine Garcia adalah Pengembang Web berpengalaman di Hosting Facts dan seorang blogger yang bersemangat. Dia suka berbagi pengetahuannya melalui artikelnya tentang pengembangan web dan WordPress.