Menambahkan Font Kustom ke WordPress


Bagaimana cara menambahkan font khusus ke WordPress


Memilih font yang tepat untuk situs WordPress Anda adalah bagian utama dari desain web dan branding situs web.

Seperti warna, gambar dan elemen lain, tipografi memainkan peran besar dalam cara situs Anda diterima oleh pengunjung.

Untungnya, font WordPress adalah salah satu dari banyak hal yang dapat Anda sesuaikan dengan bebas. Anda dapat menggunakan hampir semua font khusus gratis di situs WordPress yang Anda inginkan.

Kami akan membahas semua yang perlu Anda ketahui tentang font WordPress:

  • A) Cara Menambahkan Font Kustom ke WordPress (secara manual)
  • B) Cara Menambahkan Font Kustom ke WordPress (via plugin)
  • Mengapa menggunakan Font Kustom di WordPress
  • Di mana Menemukan Font Kustom
  • Kesimpulan

A) Cara Menambahkan Font Kustom ke WordPress Secara Manual

Ketika menambahkan font khusus ke WordPress dengan tangan, Anda memiliki tiga opsi utama: HTML, JavaScript, dan CSS. Ada pro dan kontra untuk setiap metode dan mana yang tepat untuk Anda tergantung pada pengaturan Anda. Jangan khawatir, kami akan membahas masing-masing secara detail.

1. Menggunakan CSS dan @impor

Mari kita mulai dengan metode yang paling tidak direkomendasikan. Jika Anda berencana untuk menginstal tipografi khusus dari Google Font, Anda mungkin telah memperhatikan bahwa tab itu berlabel @impor. Layanan ini memberi Anda sepotong kode CSS.

impor tab dalam font google

Anda dapat mengambilnya apa adanya dan memasukkannya ke dalam tajuk Anda (lebih lanjut tentang itu di bawah) atau menyalinnya tanpa >kurung ke awal tema Anda (atau lebih baik lagi, tema anak) style.css mengajukan.

/ *
Nama Tema: Twenty Seventeen Child
Tema URI: https://wordpress.org/themes/twentyseventeen/
Templat: dua puluh tujuh belas
Penulis: tim WordPress
Penulis URI: https://wordpress.org/
Versi: 1.0

* /

@import url ('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');


/ * CSS tambahan ada di sini * /

Melakukannya akan memuat font ke situs Anda dari style sheet. Sepertinya solusi sederhana, bukan? Mengapa hal itu paling tidak direkomendasikan?

Alasannya adalah masalah kinerja. Menggunakan @impor bukan lagi cara yang disarankan untuk digunakan karena mencegah browser mengunduh beberapa style sheet sekaligus. Konsekuensinya: waktu pemuatan halaman lebih lambat. Jauhi itu jika Anda bisa.

2. Menggunakan File Template WordPress

Metode kedua untuk mendapatkan font di situs Anda adalah dengan mengambil kode yang disediakan oleh pustaka font dan menyalinnya di Anda header.php file templat. Sebagian besar tema standar WordPress memilikinya.

Pastikan untuk menempatkannya di suatu tempat di antara dan kurung. Dengan begitu, font Anda akan dimuat setiap kali halaman dimuat.

masukan kode font google ke header wordpress

Jika Anda menggunakan tema anak, pastikan untuk menyalin tema orang tua header.php file ke direktori tema anak dan buat perubahan di sana.

Beberapa tema dilengkapi dengan pengaturan yang memungkinkan Anda untuk menambahkan kode khusus ke header dan footer Anda melalui backend. Ini juga merupakan opsi yang layak.

3. Menggunakan @ font-face

Sejauh ini, kami hanya berbicara tentang cara menggunakan font khusus di WordPress yang di-host di tempat lain, yaitu server Google dan Adobe. Namun, Anda juga dapat meng-host font di situs Anda sendiri dan menawarkannya ke browser pengunjung dari sana.

Untuk melakukan ini, Anda harus mengunduh font yang dimaksud terlebih dahulu. Ingat tombol unduhan di Google Fonts? Yang itu akan menjadi berguna sekarang. Penyedia lain juga memungkinkan Anda mengunduh font.

Ketika Anda melakukannya, pastikan Anda mendapatkannya dalam format font web. Itu berarti TTF, OTF atau WOFF. Anda akan menemukan informasi lebih lanjut tentang itu sini. Jika Anda tidak memiliki format font web yang tepat, Anda juga dapat menggunakan layanan ini untuk mengubah font Anda menjadi yang didukung.

Setelah Anda menyiapkan file font, Anda perlu mengunggahnya ke situs WordPress Anda melalui FTP. Tempat yang baik untuk menyimpannya adalah di subdirektori dari tema anak Anda bernama font (kreatif, kami tahu).

Setelah itu, Anda perlu memuat font di style sheet Anda melalui @ font-face. Begini tampilannya:

@ font-face {
font-family: Roboto;
src: url (http: //localhost/wordpress/wp-content/themes/twentyseventeen-child/fonts/Roboto-Regular.ttf);
font-weight: normal;
}

Ingatlah untuk mengganti nama font dan alamat untuk lokasinya di situs Anda sendiri. Setelah itu, font khusus baru Anda akan dapat digunakan.

Namun, ini juga bukan solusi terbaik, terutama dari segi kinerja. Server Google mungkin lebih cepat daripada server Anda dan karenanya memuat font khusus dari sana kemungkinan merupakan solusi yang lebih baik.

4. Enqueueing Fonts - “WordPress Way”

Jika Anda benar-benar ingin menambahkan font khusus ke WordPress dengan cara yang benar, Anda akan menggunakan functions.php file (di dalam direktori tema aktif Anda saat ini) dan fungsinya  wp_enqueue_script atau wp_enqueue_style.

Dengan bantuan mereka, kita dapat mengambil cuplikan kode yang disediakan oleh situs font. Namun, alih-alih menyalinnya ke file, kami akan menambahkannya ke header melalui fungsi.

Apa bedanya wp_enqueue_script dan wp_enqueue_style? Seperti namanya, satu untuk menambahkan skrip, satu untuk style sheet. Yang mana yang tepat untuk digunakan tergantung pada bagaimana font khusus Anda disediakan dari sumbernya.

Misalnya, Google Font memberi Anda font sebagai style sheet. Dalam hal ini, Anda akan menambahkannya ke situs WordPress Anda dengan cara ini:

function add_google_fonts () {
wp_enqueue_style ('google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
}

add_action ('wp_enqueue_scripts', 'add_google_fonts');

Berbeda dengan itu, font dari Adobe Edge Web Fonts datang sebagai JavaScript. Oleh karena itu, untuk mengaktifkannya di situs Anda, kode akan terlihat seperti ini:

function add_adobe_fonts () {
wp_enqueue_script ('adobe_edge_web_fonts', '//use.edgefonts.net/open-sans.js');
}

add_action ('wp_enqueue_scripts', 'add_adobe_fonts');

Bukankah begitu sulit, bukan? Plus, Anda mendapatkan poin tambahan untuk melakukannya dengan cara WordPress.

5. Panggil Font Kustom di Lembar Gaya Anda

Sekarang font telah ditambahkan ke situs Anda, Anda dapat menggunakannya secara resmi. Untuk melakukannya, yang tersisa adalah menambahkan deklarasi untuk font baru di style sheet Anda. Misalnya, untuk mengubah font untuk tag heading Anda, Anda akan menggunakan sesuatu seperti ini:

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Roboto';
}

catatan: Perhatikan bagaimana layanan yang Anda gunakan menentukan deklarasi CSS untuk font Anda. Di situs pengujian kami, kami sepertinya tidak dapat membuat Adobe Edge Web Fonts berfungsi karena mereka memanggil Open Sans dengan CSS open-sans sebagai lawan 'Open Sans' di Google Font.

Itu dia. Anda sekarang tahu cara menambahkan font khusus ke WordPress secara manual. Ucapkan selamat pada diri sendiri, ini adalah pengetahuan tingkat selanjutnya! Jelas, tindakan yang sama dimungkinkan melalui plugin. Itulah yang akan kita bicarakan selanjutnya.

B) Cara Menambahkan Font Kustom ke WordPress melalui Plugin

WordPress sphere tidak akan menjadi seperti itu jika tidak ada beberapa solusi plugin untuk menambahkan font khusus ke platform. Kami akan membahas cara penggunaan Google Font mudah, yang merupakan salah satu plugin paling populer di daerah ini.

1. Instal Plugin

Langkah pertama adalah menginstal plugin. Untuk melakukan itu, pergilah ke Plugin> Instal Baru. Kemudian, cari nama plugin. Di hasil pencarian, klik Instal sekarang dan aktifkan plugin setelah itu di situs Anda.

2. Tambahkan / Ubah Font di Situs Anda

Saat plugin aktif, Anda menemukan item menu baru bernama Tipografi dibawah Penampilan> Kustomisasi.

menu tipografi di penyesuai wordpress

Ketika Anda mengkliknya dan pilih Tipografi Default, Anda menemukan daftar kontrol untuk mengubah font paragraf dan pos Anda.

pengaturan font google mudah di wordpress customizer

Menggunakannya sangat sederhana. Cukup klik pada menu drop-down di mana dikatakan Edit Font untuk bagian situs Anda Anda ingin mengubahnya. Ini memberi Anda akses ke menu ini:

font google mudah mengubah font

Di sini, bagian terpenting adalah yang di bawah Keluarga Font. Di sini, Anda dapat memilih jenis font baru dari seluruh pustaka Font Google (gunakan Script / Subset untuk membatasi pilihan font untuk karakter dengan karakter khusus).

Font dipesan dengan font standar, serif, sans-serif, tampilan, tulisan tangan dan monospace. Namun, Anda juga dapat mencarinya dengan nama saja.

Ketika Anda mengklik font, Anda dapat melihat pratinjau perubahan secara waktu nyata di sebelah kanan.

mengubah font khusus dalam font google yang mudah

3. Konfigurasikan Font

Setelah Anda memilih font, ada banyak opsi untuk menyesuaikan tipografi Anda lebih lanjut.

Pertama-tama, Anda dapat mengubah font-weight / style di bawah menu dengan nama yang sama. Ini mengontrol ketebalan huruf.

Selanjutnya di bawah Dekorasi Teks, Anda dapat menambahkan garis bawah, garis bawah, dan garis bawah. Transformasi Teks juga memungkinkan Anda untuk mengaturnya ke semua huruf besar, huruf kecil semua atau huruf besar setiap huruf pertama. Di bawah Penampilan tab di atas, Anda juga dapat mengontrol warna font, warna latar belakang, ukuran font, tinggi garis, dan jarak huruf.

pengaturan tampilan di font google yang mudah

Akhirnya, Penentuan posisi memungkinkan Anda mengubah pengaturan lain seperti margin, padding, border, radius batas, dan tampilan.

pengaturan posisi di font google yang mudah

Singkatnya, Anda harus dapat menyesuaikan font di situs Anda sepenuhnya sesuai dengan keinginan Anda. Mudah bukan? Jangan lupa untuk memukul Simpan & Terbitkan di bagian atas ketika Anda puas dengan perubahan Anda.

Ini Tidak Berfungsi, Apa yang Harus Saya Lakukan?

Terkadang Anda tidak dapat mengubah beberapa font di situs Anda. Itu biasanya terjadi ketika tema yang Anda gunakan hadir dengan kelas CSS dan penyeleksi non-standar untuk mengaturnya.

Misalnya, dalam tema Twenty Sixteen, judul posting blog tidak hanya didefinisikan sebagai H1 tetapi juga memiliki kelas CSS yang disebut .entri-judul. Karena alasan itu, plugin tidak dapat mengubahnya.

Untuk mengatasi masalah ini, Anda harus membuat apa yang disebut kontrol font dibawah Pengaturan> Font Google.

tambahkan kontrol font di font google yang mudah

Anda dapat mengaitkan penyeleksi CSS dengan kontrol baru dan memaksa override bila perlu. Setelah melakukannya, kontrol font baru tersedia sebagai opsi tambahan di Penyesuai WordPress di bawah Tipografi Tema. Peasy mudah.

Font Kustom Lainnya. Plugin WordPress

Ada juga plugin WordPress lain yang tersedia untuk menambahkan font khusus:

  • Gunakan Font Apa Saja - Ini membantu Anda menggunakan font yang diunggah tanpa CSS. Ini merumahkan font di server Anda sendiri dan juga menawarkan alat konversi untuk format font.
  • Font Typekit untuk WordPress - Gunakan font dari Adobe Typekit layanan (yang Anda harus mendaftar). Ini memungkinkan Anda untuk memasukkan kode sematan dan CSS kustom langsung di plugin.
  • TK Font Google - Sebuah solusi alternatif untuk menanamkan font Google yang cukup banyak memindahkan pengalaman Google Font ke backend WordPress. Cobalah font dengan pratinjau dan teks khusus, lalu ubah di dalam Penyesuai WordPress.

Mengapa Menggunakan Font Kustom di Situs WordPress Anda?

Tipografi adalah ilmu tersendiri dan kami tidak akan dapat memberi Anda kursus lengkap tentang penggunaan font dalam desain web di sini. Lagi pula, ini bukan hanya tentang font tetapi juga ukuran, kemiringan, ketebalan, dan banyak hal lainnya. Namun, kami bisa tutupi mengapa menggunakan font khusus di situs WordPress Anda adalah ide yang bagus.

1. Tipografi adalah Bagian dari Kesan Pertama

Pertama-tama, font yang Anda gunakan memengaruhi banyak cara situs Anda dirasakan. Apakah situs Anda menyenangkan dan menyenangkan? Apakah Anda seorang profesional bisnis? Pengunjung memutuskan ini dalam satu lirikan dan tipografi Anda memainkan peran besar dalam persepsi mereka.

2. Font Memiliki Banyak Pengaruh Lebih Dari Yang Anda Pikirkan

Ini dapat memengaruhi kemampuan Anda untuk belajar, menghafal teks, dan bahkan memengaruhi suasana hati Anda.

Misalnya dalam satu penelitian, tercatat bahwa jika Anda ingin menambah waktu yang dihabiskan untuk membaca beberapa teks, Anda harus menggunakan font serif. Namun, jika Anda ingin membaca lebih banyak dalam waktu singkat, Anda harus beralih ke font sans-serif.

Studi lain menunjukkan orang-orang instruksi latihan yang sama di tipografi yang berbeda. Mereka kemudian meminta peserta untuk memperkirakan berapa lama waktu yang dibutuhkan untuk menyelesaikan instruksi tersebut. Menariknya, mereka yang memiliki font yang lebih kompleks menebaknya akan membutuhkan waktu lebih lama daripada grup dengan font yang lebih sederhana. Sebagai akibatnya, mereka cenderung mengikuti latihan rutin.

Di mana Menemukan Font Kustom

1. Gunakan Google Font untuk Menemukan Tipografi Ubahsuaian

Layanan pertama yang akan kita lihat adalah Google Fonts. Seperti namanya, ini adalah layanan oleh Google yang menawarkan 800+ font berbeda. Gratis untuk digunakan. Untuk semua orang.

Berikut cara menggunakannya:

2. Temukan Font yang Tepat

Saat Anda pertama kali pergi ke halaman Google Fonts (ketikkan saja ke dalam Google Search), inilah yang akan Anda lihat:

bagaimana cara menambahkan font khusus di homepage font google wordpress

Antarmuka pengguna dibuat untuk membantu Anda menemukan font yang tepat untuk tujuan Anda. Jika Anda sudah memiliki font dalam pikiran, Anda bisa mengetik namanya di kolom pencarian di sebelah kanan.

Jika tidak, Anda dapat memfilter font dengan berbagai cara, misalnya berdasarkan kategori:

  • Serif - Font yang berarti dengan garis berlekuk di akhir, seperti Times New Roman.
  • Sans Serif - Font sederhana tanpa coretan, seperti Helvetica. Font yang digunakan di situs web ini adalah contohnya.
  • Tampilan - Tipografi yang dapat digunakan dalam ukuran yang lebih besar seperti berita utama.
  • Tulisan tangan - Apakah Anda ingin tipografi Anda terlihat seperti ditulis dengan tangan? Maka ini adalah pengaturan Anda.
  • Monospace - Tipografi di mana semua karakter menempati ruang yang sama, seperti ini.

Filter lain termasuk:

  • Penyortiran - Mengurutkan font setelah tren, populer, tanggal ditambahkan atau berdasarkan abjad.
  • Bahasa -Batasi pilihan font Anda untuk bahasa yang tidak ditulis dalam alfabet Latin seperti Arab, Thailand atau Vietnam.
  • Sejumlah gaya -Pilih berapa banyak gaya yang Anda butuhkan, artinya apakah font tersedia dalam ketebalan yang berbeda, miring, tebal, dan banyak lagi.
  • Ketebalan - Pilih ketebalan font yang Anda inginkan.
  • Miring - Sama seperti ketebalan tetapi untuk miring. Mulai dari lurus ke hampir horisontal.
  • Lebar - Saring font berdasarkan lebar huruf dan spasi mereka.

Saat Anda menerapkan filter apa pun, hasil pencarian Anda menyesuaikan secara waktu nyata. Di sebelah kiri, Anda akan melihat font yang tersedia di kategori Anda dan contoh kalimat.

Saat Anda mengarahkan kursor ke font, Anda dapat menggunakan menu drop-down di bagian atas untuk membuat Google Font menampilkan paragraf contoh, seluruh alfabet atau angka. Anda juga dapat mengklik kolom kalimat dan menulis apa pun yang Anda inginkan.

edit contoh teks dalam font google

Selain itu, ada opsi untuk mengubah gaya dan ukuran font. Saat Anda membuat perubahan, Anda juga mendapatkan opsi untuk menerapkannya ke semua hasil pencarian Anda. Terakhir, lihat halaman detail font dengan mengklik Lihat Spesimen.

halaman detail font di font google

3. Tambahkan Font ke Koleksi Anda

Jika Anda menyukai font tertentu, Anda dapat menggunakan tanda tambah merah di sudut kanan atas untuk menambahkannya ke koleksi Anda. Melakukannya akan membuka menu di bagian bawah di mana Anda melihat semua font yang Anda pilih.

font yang dipilih dalam font google

Perhatikan bahwa Anda dapat menambahkan lebih dari satu kelompok font. Ini masuk akal, misalnya, ketika Anda memilih satu untuk salinan tubuh Anda dan satu lagi untuk pos.

4. Kustomisasi Pengaturan Font

Setelah Anda puas dengan koleksi Anda, klik pada menu bawah. Melakukannya akan membuka layar ini:

pengaturan font di font google

Seperti yang Anda lihat, Anda dapat menemukan beberapa potongan kode untuk disematkan dan menggunakan font di situs Anda. Ini akan menjadi penting nantinya. Untuk saat ini, klik pada tab yang bertuliskan Sesuaikan. Melakukannya akan membawa Anda ke menu ini:

menyesuaikan font di google font

Di sini, Anda dapat memilih gaya font yang dimaksud. Ini penting jika Anda ingin menggunakan font dalam berbagai ukuran, yang sering terjadi.

Namun, berhati-hatilah: semakin banyak gaya situs Anda harus memuat, semakin banyak akan memperlambat (Google Font bahkan memberi Anda indikasi kecepatan pemuatan untuk koleksi Anda saat ini di kanan atas). Jadi, pikirkan apa yang benar-benar Anda butuhkan dan pilih saja. Ngomong-ngomong, ada lebih banyak cara untuk mempercepat WordPress.

Jika Anda membutuhkan bahasa lain selain alfabet Latin standar, pastikan untuk memilihnya di bagian bawah juga.

pilih bahasa font di font google

Selain itu, yang perlu Anda ketahui adalah dua ikon panah di bagian atas.

tombol unduh dan bagikan dalam font google

Yang di sebelah kiri memungkinkan Anda melihat pratinjau dan membagikan koleksi font Anda. Ketika Anda memilih untuk melakukannya, itu membuka halaman yang diperluas di mana Anda dapat memasukkan teks sampel dan melihatnya di semua font sekaligus. Halaman ini juga bagus untuk dibagikan kepada orang-orang.

Yang lebih penting adalah tombol unduh di sebelahnya. Dengan mengekliknya, Anda dapat mengunduh file font untuk menggunakannya di mesin desktop Anda (misalnya, di Photoshop). Menggunakan Skyfonts untuk membuat mereka tetap up to date.

Nantinya, kami juga akan menunjukkan kepada Anda cara untuk mengunggah file-file ini ke server Anda dan meng-host font langsung di situs Anda. Ingatlah ini untuk masa depan. Untuk saat ini, kami akan menunjukkan kepada Anda pustaka font kedua yang serupa.

Sumber tambahan untuk Font Kustom

  • 15+ font aman web kami sarankan

Dengan hal di atas, Anda harus dapat menemukan sesuatu untuk diri Anda sendiri. Satu tip terakhir - jika Anda tidak tahu cara menggabungkan font dengan benar, gunakan Pasangan Font tempat desainer telah melakukan kerja keras untuk Anda.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me