Merubah Font-face standar pada halaman web dengan font dari FontSquirrel.
Font Squirrel
Setelah beberapa waktu yang lalu saya mengulas mengganti font pada halaman web menggunakan font dari google font, kali ini saya ingin berbagi tips lagi yang masih terkait dengan merubah font pada halaman web. Font yang saya gunakan berasal dari Font Squirrel, sebuah website yang menyediakan beberapa open source font. Dalam website ini disediakan kurang lebih 647 font yang dapat kita unduh dan kita pergunakan untuk menghiasi website yang akan kita buat ataupun memodifikasi jenis font yang kita gunakan pada website kita. Silahkan untuk lebih lanjut datang ke website Font Squirrel untuk melihat dan memilih font-font yang ingin Anda pergunakan.
Untuk mengunduh font yang ingin kita gunakan, pertama kali yang kita lakukan adalah memilih font tersebut. Di halaman depan website ini telah menampilkan beberapa font favorite yang dapat langsung kita pilih dengan menekan salah satunya. Ataupun kalau Anda ingin mengeksplorasi font-font yang disediakan website ini, Anda dapat menekan salah satu style kategori yang berada disisi kanan website ini.
Kategori Font
Setelah memilih salah satu font yang ingin Anda gunakan, Anda akan dibawa pada halaman review tentang font tersebut. Di halaman tersebut menampilkan Specimen font dari karakter huruf, angka dan beberapa simbol dari font tersebut. Selain itu terdapat juga contoh format style yang mendukung untuk font tersebut yaitu Reguler font, bold, italic, dan bold-italic.
Review Font
Langkah selanjutnya adalah mengunduh Font-face kit pada link @font-face Kit. Untuk mengunduhnya kita dapat menekan tombol download yang terdapat di sana.
Mengunduh font
Setelah font yang ingin kita pergunakan telah diunduh, langkah berikutnya adalah mengaplikasikannya pada website kita. Berikut ini langkah-langkahnya:
1. Mengekstrak folder font. Sebaiknya Anda letakkan pada folder tersendiri tiap jenis font-nya bila Anda menggunakan lebih dari satu font.
mengekstrak file
2. Meletakkannya pada direktori website project. Bila Anda menggunakan WordPress CMS seperti saya. Letakkan pada direktori themes yang Anda pergunakan.
Meletakkan Font
3. Bila sudah anda letakkan dalam direktori project web Anda, berikutnya adalah mengimport script CSS di stylesheet.CSS ke dalam script CSS utama Anda. Misalnya saya pergunakan file newstyle.CSS untuk stylesheet utama dari web saya.
contoh struktur direktori:
<folder>
–newstyles.CSS(file CSS utama)
–|-<folder font>
–|–|–<Folder FONT 1> (folder yg berisi font yg diunduh)
–|–|–<Folder FONT 2>…dst
–|–|—| stylesheet.CSS (file CSS untuk tiap font)
–|–|—| file-font(*.ttf)…dst
Mengimport script style
4. Terakhir adalah mengimplementasikan pada bagian-bagian sesuai dengan kebutuhan dalam script CSS Anda. Bagaimana memanggil nama font, Anda dapat melihat ke dalam script yang ada dalam stylesheet.CSS kemudian panggil nama font tersebut ke dalam implementasi anda. Bisa dilihat juga untuk demo font dalam file demo.html, dari situ dapat dilihat contoh sederhana pemakaian font.
Contoh Memanggil Nama Font - lihat script yang diberi tanda
Sekian dulu untuk tips dari saya, semoga bermanfaat. Terima Kasih telah berkunjung.
8 Comments
masih agak bingung mas, tak pelajari dulu hehe…
wah, brarti bukan salah pembaca bingung… salah penulisnya ini brarti… haha *nulis sambil tidur
btw klo pake google web font gak perlu nambah file di hosting kita om, hemat space hosting dikit heeheee
woalah, mas’e kok ye amit le ngirit… lah font ki mung ukuran kilobyte… hahaha
jenenge wee wong pelit…
*pelit pangkal kaya*
hahaha… filosofi dari negeri seberang… beem, ayo kolaborasi gawe Themes..
baru mampir ke mari mas Cahyo, maaf saya lama ga BW
Saya kepengen banget sebenarnya bisa utak utik blog, menurut komentar temen2, ada banyak hal yang perlu saya rubah diantaranya tampilan blog saya yang belum standard enak dibaca dan dilihat.
Namun begitu apa daya otak tak sampai mas? hehe
Nih mendisain sendiri ya themes nya?
wah.. gpp Pak Toni, saya aj malah masih jarang BW.. masih belajar mengelola teknis & non-teknis blog ini… Y nanti sesama blogger bisa saling kasih masukkan, saya jg sebenernya masih level intip2 blog orang juga buat refrensi..hehehe.. kpn2 bisa tu jadi bahan diskuisi kalo ada kopdar lagi, skalian ngundang temen yg udh mahir…
trima kasih sekali udah disempetin mampir..
One Trackback
[...] Hal ini tentunya sangat memperkaya kemampuan web untuk menampilkan font yang lebih beragam. Pada artikel sebelumnya telah saya jelaskan implementasinya dan di artikel kali ini saya akan jelaskan penggunaan dasarnya [...]