Wordpress

Cara Menambahkan Font Google ke Situs WordPress Anda .

Tampilan dan nuansa
situs web sangat penting dalam menarik dan mempertahankan perhatian pengunjung.  Konten pada sebuah website dapat didominasi oleh teks, gambar, atau media.  Teks, di mana pun digunakan, apakah banyak atau sedikit, harus dipilih dengan hati-hati.  Tipografi memainkan peran penting dalam keseluruhan tampilan dan nuansa situs web.

Font bawaan tersedia di browser dan file style.css biasanya mengakses font ini untuk ditampilkan.  Ini berarti tidak ada variasi dan ini membuat situs web tidak bersemangat.  Tapi tidak harus seperti itu.  Anda dapat memilih font yang membuat situs web Anda luar biasa dan unik.  Terkadang, font bahkan bisa menjadi karakter penentu dari sebuah situs web.

Mungkin berguna untuk mengetahui bahwa semua font termasuk dalam salah satu dari dua jenis- serif, yang berarti font memiliki garis atau ikal tambahan di akhir coretan utama atau sans-serif, yang berarti tanpa garis atau ikal tersebut.

Memilih Font

Ada banyak tempat di mana Anda dapat mengakses font yang tampak bagus seperti FontTupai.  Periksa apakah lisensi yang dilampirkan pada sumber daya ini mengizinkan Anda menggunakannya untuk tujuan Anda.  Seringkali tema yang Anda gunakan di situs web datang dengan font pilihan mereka sendiri dan Anda harus benar-benar memanfaatkannya dengan baik.  Anda juga dapat membeli font premium dari Typekit.

Saat memilih font, gunakan gaya yang selaras dengan suasana hati atau audiens target situs web Anda.  Misalnya situs web playschool dapat menggunakan font yang tampak seperti tulisan tangan anak-anak.  Jika Anda menggabungkan dua gaya, pilih yang berlawanan, seperti tebal dan tipis.  Yang paling penting, font harus dapat dibaca.

Menambahkan font Google ke tema yang ada mungkin bukan ide yang bagus, karena Anda harus menggunakan filter dan kait yang disediakan oleh tema tersebut untuk menambahkan font Google.  Karena itu, Google memang memiliki perpustakaan font yang besar, yang diperbarui secara berkala.  Dalam tutorial ini, Anda akan belajar bagaimana mengintegrasikannya dengan situs web Anda.

Setelah Anda memilih font, metode penambahannya bervariasi,

  • Salah satu metode mengharuskan Anda mengunduh file font dan ini dapat menghabiskan ruang server.  Juga tidak semua file font kompatibel dengan semua browser.
  • Metode lain mengharuskan Anda menggunakan skrip enqueue untuk menautkan skrip eksternal ke situs Anda.
  • Plugin dapat digunakan untuk menambahkan font Google.

Metode 1: Menambahkan Font Google Menggunakan Kode

Karena metode mengintegrasikan font Google ini akan melibatkan beberapa pengeditan tema yang ada, Anda mungkin ingin bekerja dalam tema anak untuk mencegah perubahan hilang pada saat pembaruan.

Membuka Google Font halaman di browser Anda, dan periksa opsi font yang tersedia di sana.  Saat Anda menemukan yang Anda inginkan, klik tombol Tambahkan ke Koleksi terhadap gaya font tersebut.  Untuk tutorial ini, saya memilih gaya Dancing Script dengan bobot 700 dan 400. Anda dapat memilih lebih dari satu gaya font.  Dalam hal ini, gabungkan beberapa gaya font dengan ‘|’  simbol.  Jika nama gaya font menggunakan beberapa kata, sisipkan ‘+’ di antara kata.

1

Sebuah pop-up akan terbuka di bagian bawah layar Anda.  Semua gaya font yang Anda pilih akan ditampilkan dalam pop-up itu.

2

Selanjutnya, klik tombol Gunakan di sebelah kanan.  Halaman lain akan terbuka di mana Anda dapat memilih berat font.  Tombol di sebelah kanan menunjukkan kecepatan pemuatan situs web untuk gaya dan bobot font masing-masing.  Jika Anda menambahkan lebih dari satu gaya font, putaran akan menampilkan kecepatan total untuk semua gaya font secara bersamaan.  Di layar ini, Anda juga dapat menambahkan karakter khusus apa pun khusus untuk bahasa yang Anda pilih.

3

Turunkan halaman, terhadap langkah 3, Anda akan melihat 3 tab – Standar, Impor, dan Javascript.  Anda dapat memilih siapa saja dari tab ini untuk menyematkan kode di situs web Anda.

4-Impor-dengan-Sorot

Di bawah tab impor, Anda akan melihat kode yang menyertakan nama font (disorot) yang telah Anda pilih.

@import  url(http://fonts.googleapis.com/css?family=Dancing+Script:400,700);

Sekarang, Anda cukup menempelkan kode ini di file style.css dari tema Anda.  Meskipun metode ini mudah diikuti, metode ini memiliki kelemahan memperlambat situs Anda.  Ini karena file yang diimpor harus diunduh terlebih dahulu, dan konten lainnya setelahnya.

Cara yang lebih baik untuk menambahkan font Google adalah dengan menggunakan kode yang dihasilkan dengan mengklik Tab standar.

5 Standar dengan sorotan

Menempelkan potongan kode ini langsung di header.php mungkin tidak benar-benar berhasil.  Dan membuat perubahan pada file tema induk tidak disarankan, karena semua perubahan mungkin hilang pada pembaruan berikutnya.  Cara yang lebih rapi untuk melakukan ini adalah dengan membuat perubahan di functions.php di tema anak.  Ini berarti bahwa perubahan ini akan dimainkan secara berurutan setelah fungsi tema induk dijalankan (dan tidak akan menimpa fungsi induk).

Tautan yang dihasilkan adalah deklarasi stylesheet.  Anda dapat mendaftarkan kode ini di bawah ‘googleFonts’ dan membuat fungsi load_fonts.  Ini akan mengantrekan gaya.  Add_action, akan menambahkan font ke header.

function load_fonts() {
        wp_register_style('googleFonts',
     'http://fonts.googleapis.com/css?family=Dancing+Script:400,700');
        wp_enqueue_style('googleFonts');
         }
    
    add_action('wp_enqueue_scripts', 'load_fonts');

Setelah ini selesai, simpan file.

Dengan tindakan ini, kode akan dimasukkan ke dalam header, sedangkan tema anak terus mewarisi header.php dari induknya.  Metode ini akan meningkatkan portabilitas tema Anda, sekaligus menjaganya tetap kompatibel dengan plugin.

Hanya satu langkah yang tersisa – mengintegrasikan font Google di CSS Anda.

6 Mengintegrasikan

Jadi, lanjutkan ke lembar gaya CSS utama Anda dan tambahkan deklarasi keluarga font di sana seperti ini,

body {
    font-family: 'Dancing+Script' , sans-serif;
    font-size: 14px;
    color: #191919;
    }

Demikian pula, Anda dapat menerapkan pemformatan gaya yang sama ke elemen lain dan menyimpan file CSS Anda.

Sekarang Anda akan melihat bahwa situs web telah diperbarui dengan font yang telah Anda pilih.

Jika Anda memilih untuk menggunakan kode yang dihasilkan dengan mengklik Javascript tab, paste kode di header.php, tepat setelah membuka tag head.

Metode 2: Menambahkan Google Font dengan plugin

Seperti yang telah saya sebutkan di awal, Anda juga dapat menambahkan font Google menggunakan plugin.  Memasang dan mengaktifkan plugin ini cukup mudah.  Tetapi memilih font yang tepat dengan beberapa plugin mungkin agak sulit, karena mungkin perlu penyesuaian dengan CSS.

Ada banyak plugin yang membantu menambahkan font ke situs web Anda, termasuk font Google.  Untuk beberapa nama- Fontmeister, Supreme Google Webfonts, Typecase Web Fonts, Google Web Fonts Manager.  Mari kita lihat lebih dekat dua plugin yang lebih populer yang akan membantu dalam menambahkan font Google.

WP Google Font

WP Google Font

WP Google Font menambahkan kode yang diperlukan ke situs web Anda.  Ini membantu Anda menambahkan font dari direktori Google Fonts dengan dua cara –

  • Dari dalam panel admin, Anda dapat menetapkan font Google ke elemen CSS tertentu di situs web Anda.
  • Atau, Anda dapat bekerja dari dalam stylesheet tema Anda sendiri.

Anda dapat menyesuaikan font dengan baik dengan memeriksa opsi di halaman pengaturan.  Namun, tidak ada opsi untuk melihat pratinjau font sebelum menekan tombol simpan.  Dimungkinkan untuk menyimpan hingga 6 pengaturan dan menetapkannya ke 6 tag berbeda.  Plugin diperbarui saat dan saat font ditambahkan ke pustaka font Google.  Ini mencatat 100.000+ pemasangan aktif, tetapi yang mengganggu, iklan untuk layanan lain telah dibundel dengan plugin.  Ini menarik peringkat bintang 3,9.

Font Google Mudah

Google Font Mudah 6

Font Google Mudah plugin terintegrasi dengan penyesuai WordPress Anda dan memungkinkan Anda membuat font khusus untuk situs web Anda dan mempratinjaunya, sebelum memusatkan perhatian pada font yang Anda inginkan dan menyimpannya.  Anda dapat memasukkan font dan varian font tanpa coding apapun.  Setiap aspek font dapat disesuaikan – berat, ukuran, tinggi, warna, jarak.  Saat Anda memilih font Google, semua stylesheet untuk font tersebut secara otomatis diantrekan.

Keuntungan utama dengan plugin ini adalah tidak diperlukan pengeditan di lembar gaya tema, yang berarti Anda dapat memperbarui tema Anda tanpa kehilangan font Google.  Plugin ini juga siap terjemahan dengan file .mo dan .po disertakan.

Plugin ini ideal untuk pemilik situs web yang ingin tetap berpegang pada tema mereka, tetapi hanya ingin mengubah tipografi tanpa pengkodean apa pun.  Atau untuk orang-orang yang memiliki pengetahuan dasar tentang pengkodean dan ingin menambahkan beberapa aturan font khusus.

Plugin ini telah mencatat lebih dari 200.000+ pemasangan dan memberi peringkat 4,9 bintang yang tinggi.

Kesimpulan

Sekarang setelah Anda tahu cara menambahkan font Google ke situs web, Anda dapat mencobanya untuk beberapa variasi di situs web Anda.  Ingatlah bahwa menambahkan terlalu banyak gaya font dapat memperlambat situs web Anda, jadi pertahankan seminimal mungkin yang benar-benar akan Anda gunakan.

Demikanlah tulisan tentang Cara Menambahkan Font Google ke Situs WordPress Anda . Semoga dapat menjadi manfaat bagi kita semua.

Related Articles

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.

Back to top button