Home / WordPress / Inilah Cara Menggunakan Font Face Di WordPress

Inilah Cara Menggunakan Font Face Di WordPress

Inilah Cara Menggunakan Font Face Di WordPress – Dalam hal merubah jenis font di blog baik CMS WordPress khusus untuk domain TLD dapat dikelompokkan menjadi dua cara. Menggunakan font internal dan font eksternal. Font internal artinya dengan memanfa’atkan font umum yang sudah diinstal di komputer. Font umum contohnya seperti : Arial, Times New Roman, Georgia, Verdana. Namun masalahnya bagaimana jika kita ingin menentukan font diluar font umum tersebut? Maka yang kita butuhkan adalah menggunakan jenis font eksternal.

Baca Juga : Cara Membuat Related Post Tanpa Plugin Di WordPress

Font eksternal yang akan saya bahas kali ini adalah dengan menggunakan perintah @font-face. Selain dengan [email protected], font eksternal juga bisa kita tentukan dengan bantuan Google Font. Caranya silakan Anda baca di tulisan Cara Cepat Mengganti Font Blog WordPress.

Namun kelemahannya jika kita menggunakan font face, kita harus sedikit tahu jenis-jenis format font. Kenapa? Karena dengan banyaknya jenis web browser, maka setiap web browser berbeda-beda mendukung setiap format font.

Jenis Format Font Agar Bisa Dikenali WEB Browser

1. Jenis Format Font EOT (Embedded Open Type)

Jenis format font EOT ini khusus agar font bisa digunakan di Web Browser Internet Explorer.

2. Jenis Format Font SVG  (Scalable Vector Graphic)

Jenis format font SVG digunakan agar bisa dijalankan di IOS Safari. Format font SVG menghasilkan gambar vector, artinya kualitas gambar tidak diragukan lagi. Karena gambar vector ini jika di zoom tidak akan berubah kualitasnya.

3. Jenis Format Font TTF  (True Type) dan OTF (Open Type)

Mungkin Anda sudah tidak asing lagi dengan jenis format font TTF dan OTF. Karena jenis format font ini paling banyak digunakan. Karena sebagian besar Web Browser sudah mendukung dengan penggunaan jenis format font ini. Dan juga ekstensi TTF dan OTF digunakan di komputer OS Windows. Anda bisa cek di C:\Windows\Fonts.

4. Jenis Format Font WOFF (Web Open Font Format)

Ini adalah jenis format font yang terakhir, dalam praktek menggunakan font face di WordPress. Jenis format font WOFF fungsinya hampir sama dengan format font TTF dan OTF. Karena jenis format font ini sudah banyak yang mendukung di beberapa Web Browser. Diantaranya : Firefox, Chrome, Opera, Safari.

Lalu Bagaimana Cara Menggunakan Font Face Di WordPress ?

Sekarang kita sudah mengenal jenis-jenis format font agar bisa dikenali oleh seluruh Web Browser. Selanjutnya mari kita bahas cara menggunakan font eksternal dengan perintah @font face.

Sebelum menginjak ke pengaturan kode CSS untuk perintah @font face, Anda tentukan dulu jenis font apa yang akan digunakan. Sebagai contoh dalam tutorial cara menggunakan font face kali ini, saya menggunakan jenis font FjallaOne Reguler.

Untuk jenis font yang akan digunakan dalam praktek pengaturan perintah @font face, bisa Anda dapatkan di web-web khusus penyedia font gratis. Sebagai rekomendasi, Anda bisa memanfa’atkan font yang disediakan di web FontsQuirrel. Seperti jenis font FjallaOne Reguler saya dapat di web www.fontsquirrel.com/fonts/fjalla.

Cara Menggunakan Font Face 2

Setelah Anda menemukan jenis font yang tepat untuk dipasang di WordPress. Maka langkah selanjutnya Anda memerlukan aplikasi generator untuk menambah jenis format font. Karena seperti yang sudah saya terangkan diatas, perintah @font face agar bisa dijalankan di web browser harus memiliki jenis format empat macam (EOT, SVG, TTF, dan WOFF). Sedangkan font yang Anda download di FontsQuirrel atau font yang tersimpan di komputer Windows, hanya ekstensi TTF saja.

Web FontsQuirrel selain menyediakan jenis-jenis font yang bisa Anda download secara gratis, juga tersedia tools generator font. Tool generator FontsQuirrel bisa Anda manfa’atkan untuk menambah format-format font yang dibutuhkan dalam pengaturan perintah @font face.

Cara Menggunakan Font Face 3

Langsung saja Anda menuju ke www.fontsquirrel.com/tools/webfont-generator untuk menambah jenis format font yang dibutuhkan.

Di halaman WebFont Generator FontsQuirrel, pertama klik Add Fonts. Cari font yang sudah tersimpan dikomputer. Pilih EXPERT… untuk menampilkan pilihan Font Formats. Karena kebutuhan kita hanya untuk pengaturan perintah @font face, maka di opsi Font Formats, pilih TrueType, WOFF, EOT Compressed, dan SVG. Pengaturan lainnya biarkan saja, selanjutnya pilih Yes, the fonts I’m uploading are legally eligible for web embedding. Terakhir klik DOWNLOAD YOUR KIT.

Cara Menggunakan Font Face 5

Nanti Anda akan menghasilkan file-file font seperti berikut :

Cara Menggunakan Font Face 6

Kita ambil file yang diperlukan saja, yaitu keempat format font yang sudah saya terangkan diatas. Dan sebaiknya Anda rename atau hapus nama “webfont”nya. Ini untuk memudahkan Anda nantinya jika sudah bermain dengan kode.

Silahkan Anda buat folder baru dengan nama “Font” lalu isi dengan file-file format font yang diperlukan untuk perintah @font face. Setelah Anda hapus nama “webfont”nya, maka nama-nama file font yang diperlukan akan seperti ini :

  1. fjallaone-reguler.eot
  2. fjallaone-reguler.svg
  3. fjallaone-reguler (TTF)
  4. fjallaone-reguler.woff

Sekarang Waktunya Bermain Dengan Kode

Sekarang Anda mempunyai satu folder dengan nama “Font” dan didalamnya berisi file-file font untuk pengaturan perintah @font face. Selanjutnya WinRAR atau WinZIP folder Font tersebut dan upload ke root direktori tema yang Anda gunakan. Upload di public_html > wp-content >themes > [nama tema yang Anda gunakan]. Dan Ekstrak folder Font WinRAR atau WinZIPnya.

Untuk setiap perintah @font face, maka Anda membutuhkan kode CSS seperti berikut :

@font-face {
 font-family: 'nama-font';
 src: url('font/nama-font.eot');
 src: url('font/nama-font.eot?#iefix') format('embedded-opentype'),
 url('font/nama-font.woff') format('woff'),
 url('font/nama-font.ttf') format('truetype'),
 url('font/nama-font.svg#nama-font') format('svg');
 font-weight: normal;
 font-style: normal;
 }

Rubah setiap kode ‘nama-font’ dengan nama font yang Anda gunakan. Contoh disini saya menggunakan jenis font fjallaone-regular. Maka kira-kira kode perintahnya akan seperti ini :

@font-face {
 font-family: 'fjallaone-regular';
 src: url('font/fjallaone-regular.eot');
 src: url('font/fjallaone-regular.eot?#iefix') format('embedded-opentype'),
 url('font/fjallaone-regular.woff') format('woff'),
 url('font/fjallaone-regular.ttf') format('truetype'),
 url('font/fjallaone-regular.svg#fjallaone-regular') format('svg');
 font-weight: normal;
 font-style: normal;
 }

Tempatkan kode CSS diatas di style.css di tema Editor yang Anda gunakan. Dan untuk dapat menggunakan font eksternal tersebut, maka kita membutuhkan kode pemanggil seperti berikut :

font-family: 'fjallaone-regular';

Sebagai contoh saya akan menggunakan font eksternal fjallaone-reguler ini di subheading h1, mungkin kodenya seperti ini :

h1 {
 margin-bottom:12px;
 font-family: 'fjallaone-regular';
 font-size:28px;
 color: #393d46;
 letter-spacing: -1px;
 line-height:44px;
 }

About InfoMenarik

Berbagi Info & Tips Trik Menarik tentang Seputar EPS-Topik Korea, Kesehatan, Microsoft Office, Pendidikan, Photoshop, Software, Teknologi, WordPress Terlengkap dan Gratis.

10 comments

  1. makasih infonya gan, besok kalau dah punya wordpress bisa coba dipraktekkan

  2. pas banget yg pake wordpress
    makasih mas

  3. Thanks Infonay :-D

  4. saya masih pakai blogcepot kang, jadi blm ngerti akan hal ini, ijin bookmark dulu ya kang, siapa tau jika nanti saya beralih ke wp, tips ini bsa bermanfaat. mksh infonya ,. ,

  5. sayang ga bisa buat blogspot ya mas :)
    tapi di wp juga sy lebih suka pakai google font si, biar bisa ganti2 tanpa upload dulu ke folder themenya

Leave a Reply

Your email address will not be published. Required fields are marked *