Popular Posts

Friday, March 24, 2017

Cara Mengganti Font Di Wordpress

Cara Mengganti Font di WordPress (Otomatis dan Manual)

Cara Mengganti Font di WordPress (Otomatis dan Manual)

Kami berusaha menyediakan website yang berguna untuk pengetahuan para pembaca, panduan singkat dan sederhana ini semoga menjadi jalan bagi kalian yang mengalami kesulitan dalam membuat blog di dunia maya, kami mengambil sumber dari blog Panduan Blog Online.com seandainya kalian berkenan langsung mengunjungi website tersebut, selamat menikmati!

Cara Mengganti Font di WordPress

Membuat blog atau website yang unik dan berbeda dari website/blog lainnya adalah keinginan semua orang. Setiap blogger dan pemilik website berusaha sebaik mungkin untuk membuat website atau blognya lebih menonjol dari yang lain.

Salah satu dari sekian banyak komponen website atau blog yang bisa Anda modifikasi adalah font. Font yang unik bisa menjadi identitas website atau blog Anda. Sayangnya, font yang disediakan WordPress secara default atau font dari tema yang Anda gunakan mungkin tidak cocok dengan gaya Anda.

Oleh karena itu, Anda perlu mengganti font di WordPress secara mandiri. Di artikel ini, saya akan menjelaskan bagaimana cara mengganti font di WordPress dengan dua cara, yaitu manual dan otomatis.

Cara Mengganti Font di WordPress Secara Manual

Cara mengganti font di WordPress yang pertama adalah secara manual. Mengganti font di WordPress secara manual agak rumit karena Anda perlu mengunduh font sampai mengunggahnya secara mandiri. Namun, cara ini layak Anda terapkan jika Anda tidak ingin memasang plugin tambahan.  

Berikut adalah cara mengganti font di WordPress secara manual:

1. Download Font di Komputer

Terdapat berbagai situs penyedia font yang bisa Anda kunjungi untuk mengunduh font secara gratis. Beberapa situs penyedia font yang bisa Anda manfaatkan adalah FontSquirrel, Google Fonts, Adobe Edge Web Fonts, Fonts.com, Dafont, dan 1001FreeFonts.

2. Ekstrak Font WordPress

Setelah mengunduh font yang Anda inginkan, kini saatnya untuk melakukan ekstrak file. Biasanya situs penyedia font memberikan fontnya dalam format .ZIP. Maka dari itu Anda perlu mengekstraknya menggunakan 7-Zip atau WinZip.

3. Convert Format Font (Opsional)

Ada berbagai macam format font untuk website dan Anda perlu mengetahui jenis-jenis format tersebut sebelum mengunggahnya di website Anda. Terdapat beberapa format yang tidak kompatibel dengan semua browser internet.

Tiga format font yang paling umum adalah True Type Fonts (ttf), Web Open Font Format (woff), dan Open Type Fonts (otf). Ketiga format font tersebut bekerja secara optimal di semua browser internet.  

Anda bisa mengecek kompatibilitas font menggunakan Web Font Generator Tool. Jika Anda ingin menggunakan font yang formatnya tidak kompatibel dengan semua browser, Anda bisa mengubah formatnya menggunakan Web Font Generator Tool. Berikut adalah caranya:

– Unggah font yang ingin Anda ubah formatnya

– Centang Yes, the fonts I’m uploading are legally eligible for web embedding

– Download hasil konversi

4. Upload Font Menggunakan FTP

Langkah selanjutnya adalah mengunggah font pilihan Anda menggunakan FTP. FTP adalah kependekan dari File Transfer Protocol yang memungkinkan Anda mengirimkan data dari komputer ke server.

Salah satu aplikasi FTP yang bisa Anda gunakan untuk mengunggah font adalah FileZilla. Unggah file font ke direktori wp-content/themes/your-theme/fonts. Jika tidak menemukan folder fonts, Anda bisa membuatnya secara mandiri di direktori tersebut.

5. Buka Dashboard WordPress

Setelah proses unggah font selesai, buka dashboard WordPress Anda dan pilih menu Appearance > Editor. Editor akan menampilkan file style.css. Kemudian scroll ke bawah dan tambahkan kode di bawah ini:

@font-face {font-family: Aguafina Script-Regular;src: url(https://niagahoster.com/wp-content/themes/twentyseventeen/fonts/AguafinaScript-Regular.ttf);font-weight: normal;}

Jangan lupa untuk mengganti konten font-family dan URL sesuai dengan URL dan font yang Anda gunakan.

6. Update File

Klik Update File untuk menyimpan perubahan yang telah Anda lakukan.

7. Tentukan Penerapan Font

Kode di atas belum mengaplikasikan penerapan font di front end website Anda. Anda perlu menentukan di bagian mana saja font itu diterapkan dengan mengedit file style.css yang sama. Contohnya kode di bawah ini digunakan untuk mengganti font di judul website:

.site-title {     font-family: "Aguafina Script-Regular", Arial, sans-serif;     }

Cara Mengganti Font di WordPress Menggunakan Plugin

Mengganti font di WordPress mungkin terlihat susah untuk kebanyakan orang, terutama pemula dan orang yang masih awam dengan WordPress. Namun, Anda tidak perlu khawatir karena Anda bisa mengganti font di WordPress menggunakan plugin.

Terdapat berbagai pilihan plugin font WordPress yang bisa membantu Anda menambahkan font custom di WordPress. Kelebihan mengganti font di WordPress dengan plugin adalah lebih mudah karena Anda hanya perlu mengikuti pengaturan dari pluginnya.

Berikut adalah beberapa plugin yang bisa Anda gunakan untuk menambahkan font custom di WordPress:

1. WP Google Fonts

WP Google Fonts memungkinkan Anda untuk menambahkan font custom di WordPress dengan mudah. Plugin ini akan secara otomatis menambahkan kode-kode yang dibutuhkan ke website Anda agar font yang ditambahkan bekerja secara optimal.

Selain itu, Anda juga bisa dengan bebas mengatur penerapan font di bagian-bagian tertentu. Misalnya, Anda hanya ingin mengganti font untuk H2 dan H3, Anda bisa dengan mudah mengaturnya di WP Google Fonts. Bahkan Anda bisa menambahkan lebih dari satu font di website Anda menggunakan plugin ini.

Cukup install plugin WP Google Fonts dari direktori resmi WordPress. Setelah selesai melakukan instalasi dan aktivasi, Anda akan diarahkan ke Google Font Control Panel. WP Google Fonts menyediakan lebih dari 600 pilihan font yang bisa Anda gunakan.

2. Google Fonts for WordPress

Plugin font kedua adalah Google Fonts for WordPress. Plugin ini sudah diunduh lebih dari 30 ribu kali di WordPress dan menyediakan lebih dari 800 jenis font yang bisa Anda pilih.

Cara penggunaannya pun cukup mudah. Sama dengan WP Google Fonts, Anda hanya perlu menginstall plugin Google Fonts for WordPress melalui direktori plugin WordPress lalu mengkativasinya.

Kemudian Anda bisa memilih plugin dengan mudah melalui pengaturan seperti di bawah ini:

3. Use Any Font

Plugin ketiga yang bisa Anda gunakan untuk menambahkan font custom di WordPress adalah Use Any Font. Anda bisa menemukan plugin ini melalui direktori plugin di dashboard WordPress Anda atau mengunduhnya melalui situs resmi WordPress.

Untuk bisa mengaktifkan plugin ini, Anda memerlukan API Key dan melakukan verifikasi secara gratis. Setelah verifikasi selesai, Anda bisa menambahkan font custom di WordPress Anda.

Berbeda dengan WP Google Fonts dan Google Fonts for WordPress, plugin ini memungkinkan Anda untuk mengunggah font dari penyedia font pihak ketiga. Anda bisa mengunggah font yang Anda dari pihak ketiga dalam format ttf, otf, atau woff melalui fitur Upload Fonts seperti di bawah ini:

Kesimpulan

Demikian artikel mengenai cara mengganti font di WordPress secara manual dan otomatis. Jika WordPress Anda sudah dipasangi terlalu banyak plugin, Anda bisa menggunakan cara pertama. Meskipun agak rumit dan memakan waktu lama, cara pertama bisa dicoba kalau Anda tidak mau membebani WordPress dengan plugin tambahan.

Jika Anda menginginkan cara yang praktis dan cepat, plugin font adalah solusi yang tepat untuk Anda. Dengan menggunakan plugin seperti WP Google Font, Google Fonts for WordPress, dan Use Any Font, Anda bisa menambahkan font custom di WordPress tanpa melakukan coding.

Jadi, cara mengganti font WordPress mana yang akan Anda pilih? Apa pun cara yang Anda pilih, selalu ingat untuk memilih font yang mudah dibaca oleh pembaca. Dengan begitu pembaca akan semakin nyaman berada lebih lama di website atau blog Anda. Selamat mencoba!

Baca juga artikel:

Source:niagahoster.com

No comments:

Post a Comment

Cara Mengatasi Error Are You Sure You Want To Do This Di Wordpress

Cara Mengatasi Error "Are You Sure You Want To Do This" di WordPress Cara Mengatasi Error “Are You Sure You Want To Do This” di Wo...