Cara Menggunakan Font yang Diunduh di WordPress tanpa Plugin

Google Font adalah sumber yang luar biasa. Sebelum tersebar luas, membuat situs web yang menggunakan font unik sangat merepotkan. Namun, sekarang, dengan beberapa klik dan satu cuplikan kode, situs web Anda berubah dari Helvetic-eh menjadi Helvetic-awesome . Tetapi bagaimana jika font yang Anda sukai bukan bagian dari keluarga Google Font? Anda perlu tahu cara menggunakan font yang diunduh karena Anda telah menemukan font hipster fantastis yang berbicara dengan jiwa janggut Anda.

Menggunakan font yang diunduh di situs web Anda tidak sesederhana clicky-clicky-paste-paste. Ini bukan proses yang sulit, ingatlah, dan saya akan memandu Anda melaluinya sehingga Anda tidak akan pernah memiliki situs web Helvetic-eh lagi.

Sekarang, saya ingin menunjukkan bahwa Anda dapat melakukan ini melalui sebuah plugin. Ada beberapa yang tersedia di repo. Tapi mengapa kita ingin melakukan itu? Saya adalah tipe orang yang lebih suka menghindari penggunaan plugin ketika beberapa baris kode akan melakukan hal yang sama. Kelebihan plugin menyebabkan banyak kembung, permintaan HTTP yang tidak perlu, dan memperlambat situs Anda.

Jadi kita akan mengimpor font-font ini dengan tangan-seperti ini akhir tahun 90-an lagi. Wow, ya.

Memilih dan Mengunduh Font

Saya penggemar berat font roundup. Tema Elegan memiliki banyak sekali yang dapat Anda pindai untuk melihat apa yang Anda suka. Jadi tekan beberapa ini dan lihat apa yang Anda suka.

• Font tulisan tangan
• Font Retro
• Font Kelas Atas
• Font Kursif
• Font Hipster
• Font Menyenangkan

Bagi saya, saya menggunakan font Aventura dari kumpulan Hipster.

Langkah pertama Anda adalah menemukan tautan unduhan untuk font dan menyimpan file ke komputer Anda. Ini kemungkinan akan menjadi file .zip yang berisi berbagai format file. Yang paling umum yang akan Anda temukan adalah .ttf (Fon TrueType) atau .otf (Font OpenType).

Membuat Webfont (Agak Opsional, tetapi Tidak Juga)

FontSquirrel memiliki alat hebat yang dapat Anda gunakan untuk memastikan tidak ada seorang pun dan tidak ada browser yang tidak kompatibel dengan keindahan situs Anda. Karena sebagian besar font yang Anda unduh hanya akan tersedia dalam satu format, alat FontSquirrel membuatnya sehingga Anda tidak dibatasi oleh apa yang didistribusikan oleh pembuat font. Selama Anda memiliki hak untuk menggunakan font tersebut, Anda dapat memastikan font tersebut berfungsi dengan produk/situs Anda.

Cukup unggah font yang baru saja Anda unduh dan pilih opsi Anda. Secara pribadi, saya menggunakan opsi Expert , hanya untuk mendapatkan semua format font yang saya bisa. Yang lain berfungsi, tetapi Anda tidak mendapatkan banyak jenis file, yang merupakan inti dari semuanya.

FontSquirrel juga luar biasa karena memberi Anda CSS yang diperlukan untuk mengimpornya ke situs Anda. Bagaimana itu untuk user-friendly? Anda cukup menyalin dan menempelkannya (yang akan kita bahas di bawah).

Mengunggah Font Anda ke WordPress

Setelah itu selesai, Anda harus mengunggah font ke penyedia hosting Anda. Saya selalu melakukan ini melalui FTP (saya menggunakan FileZilla, tetapi Anda dapat menggunakan klien apa pun yang Anda inginkan).

Jika Anda tidak mengetahui informasi FTP host Anda, buka cPanel Anda dan lihat di bawah Files -> FTP Accounts .

Anda akan melihat setiap akun FTP untuk host di sana, dan Anda juga akan melihat tautan Konfigurasi Klien FTP di samping masing-masing akun .

Saat Anda masuk ke sana, cPanel memberi Anda informasi server atau file FileZilla (dan lainnya) yang dapat Anda impor untuk mengatur kredensial Anda. Saya menggunakan manual, secara pribadi, tetapi Anda melakukan apa yang Anda suka. Bahkan jika Anda menggunakan file tersebut, Anda akan memerlukan kata sandi untuk masuk, sehingga kedua metode tersebut aman dan terjamin.

Sekarang setelah Anda masuk ke host melalui FTP, navigasikan ke folder /wp-content untuk situs Anda. Karena ini adalah konten untuk situs WordPress Anda, mengapa Anda tidak meletakkannya di sana? Jangan ragu untuk meletakkannya di mana saja, bahkan di /wp-content/uploads . Anda melakukan Anda.

FTP sangat mudah untuk mengunggah file Anda. Temukan saja file font yang Anda unduh dan seret ke panel kanan bawah di FileZilla. Itu akan memulai pengunggahan. Tidak perlu lebih dari satu detik atau lebih bagi Anda untuk melihatnya di direktori.

Jika Anda menggunakan alat FontSquirrel yang kami diskusikan di atas, Anda akan melakukan ini untuk semua file font yang Anda unduh juga. Cukup seret dan jatuhkan ke mana pun Anda ingin menyimpannya.

Menggunakan Font Anda dengan CSS

Font Anda sekarang diunggah dan dengan aman meringkuk ke dalam selimut konten wp yang hangat dan nyaman. Saatnya menambahkan impor CSS yang diperlukan ke tema Anda.

Buka direktori tema anak Anda (Anda menggunakan tema anak, kan?) di klien FTP Anda dan temukan file style.css , klik kanan, dan pilih Lihat/Edit untuk menampilkannya di editor teks default Anda.

Jika Anda tidak memiliki tema anak, gunakan Orbisius Child Theme Creator untuk melakukannya dengan sangat cepat. Anda dapat menghapus plugin sesudahnya. Saya suka hal ini.

@font-wajah

Kode yang kami gunakan berasal langsung dari FontSquirrel (Anda dapat menulis sendiri atau menyalin/menempelkan contoh di bawah), dan yang saya ubah hanyalah jalur unggah URL untuk menyertakan /wp-content . Segala sesuatu yang lain adalah apa yang disediakan oleh generator webfont.

Semua skrip @font-face ini adalah memberi tahu stylesheet situs web Anda, "hei, kawan, saya meletakkan font baru ini di sini jika Anda ingin menggunakannya kapan-kapan." Anda tahu, seperti yang Anda lakukan saat membawa pulang kue mangkuk dan memberi tahu orang-orang yang tinggal bersama Anda.

Tanpa @font-face , jika Anda mencoba memanggil font-family: 'aventurabold'; oleh CSS, situs Anda tidak akan dapat menemukannya karena tidak pernah diberitahu di mana Anda menyimpannya.

@font-face {
    font-family: 'aventurabold';
    src: url('/wp-content/aventura-bold-webfont.eot');
    src: url('/wp-content/aventura-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/aventura-bold-webfont.woff2') format('woff2'),
         url('/wp-content/aventura-bold-webfont.woff') format('woff'),
         url('/wp-content/aventura-bold-webfont.ttf') format('truetype'),
         url('/wp-content/aventura-bold-webfont.svg#aventurabold') format('svg');
    font-weight: normal;
    font-style: normal;

}

Simpan file, dan karena Anda membukanya untuk mengedit melalui FileZilla, Anda akan mendapatkan dialog yang menanyakan apakah Anda ingin mengganti yang ada di server. Jawaban Anda, tentu saja, ya.

Sekarang yang harus Anda lakukan adalah masuk ke custom.css Anda (atau jika Anda menggunakan Divi, Divi -> Opsi Tema -> CSS Kustom di panel navigasi dasbor WP Anda.)

Anda cukup menambahkan gaya CSS seperti yang Anda lakukan untuk font lainnya. Saya cukup mengganti Google Font 'Roboto' dan 'Exo' yang saya gunakan dengan 'aventurabold' , dan semuanya berjalan lancar (terima kasih atas impor @font-face di atas).

body {
    font-family: "aventurabold", arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 {
    color:  #fff;
    font-family: 'aventurabold', sans-serif;
    font-weight: 700;
   text-transform: uppercase;
}

Buah Kerja Kami

Berikut tampilannya sebelumnya:

Dan inilah yang terjadi setelah saya menambahkan Aventura ke CSS:

Hore! Berhasil! Kerja yang baik! Pergi kami!

Terlihat Bagus, Teman

Seperti yang pernah dikatakan Kapten Malcolm Reynolds, "Kami telah melakukan hal yang mustahil, dan itu membuat kami kuat." Yah, oke, jadi mengunggah font dan mengimpornya melalui CSS mungkin tidak cukup untuk melakukan hal yang mustahil , tetapi Anda tentu telah melakukan sesuatu yang banyak pengguna WordPress tidak akan berani lakukan: menambahkan fungsionalitas inti tanpa plugin.

Dan itu, teman-teman saya, memang membuat Anda perkasa.

Jadi apa font favorit Anda untuk digunakan di web yang bukan Google Font? Beritahu saya di komentar!

Gambar mini artikel dengan 32 Piksel / shutterstock.com