Cara Merubah Jenis Font HTML dengan CSS (font-family)
Keterbatasan Jenis Font di dalam Web Browser
Font adalah jenis huruf yang digunakan di dalam sebuah dokumen. Pada aplikasi pengolah kata seperti Microsoft Word, terdapat puluhan bahkan ratusan jenis font yang bisa kita pilih. Font-font ini berasal dari sistem Windows atau dari beberapa aplikasi lain.Jika anda menginstall program tambahan seperti Adobe Photoshop, aplikasi ini juga membawa font sendiri yang akan ditambahkan ke dalam jenis-jenis font yang terdapat di dalam Windows, dan karena font ini adalah bawaan aplikasi, maka tidak semua komputer memiliki font ini.
Apabila kita membuat sebuah dokumen dan mencetaknya langsung, menggunakan font apapun yang tersedia di komputer tidak akan menjadi masalah. Namun jika anda membuat dokumen yang akan digunakan di dalam komputer lain, sebaiknya menggunakan font standar yang kemungkinan besar akan tersedia di komputer tujuan.
Dalam memilih jenis font untuk website, kondisi yang sama juga menjadi pertimbangan penting. Di dalam CSS, kita bisa menggunakan berbagai jenis font sesuai dengan desain yang diinginkan. Namun font yang akan ditampilkan pada web browser sepenuhnya berasal dari komputer user (pengunjung web). Jika kita memilih font yang tidak standar, maka desain web yang telah dirancang serapi mungkin akan menjadi ’kacau’ karena bisa saja font yang kita pilih tidak tersedia di komputer pengunjung.
Untuk mengatasi hal ini, salah satunya adalah dengan menggunakan font ’standar’ yang umum tersedia di dalam berbagai sistem operasi seperti Windows, Linux, Mac OS, dll. Menggunakan font-font standar ini akan ’menjamin’ desain web yang telah dirancang dapat didukung oleh mayoritas web browser.
Mengenal Jenis-jenis Font Standar CSS
Font Standar / Font Generik adalah jenis font yang umumnya tersedia pada hampir semua sistem. Jika kita membagi jenis font berdasarkan ’bentuknya’, terdapat 5 jenis font generik, yaitu serif, sans-serif, monospace, cursive, dan fantasy.Jenis Font Serif
Font ‘serif’ adalah jenis font yang memiliki ‘kaki’ pada setiap hurufnya. Contoh jenis font serif adalah Times New Roman dan Georgia. Font jenis ini biasanya digunakan untuk media cetak kertas karena akan terkesan rapi dan mudah dibaca.Jenis Font Sans-serif
Font dengan jenis ‘sans-serif’ adalah jenis font yang tidak memiliki ‘kaki’ pada setiap ujung karakternya. Contoh dari font jenis ini adalah Arial, Verdana, Trebuchet MS, Helvetica, dan Calibri. Font jenis ini sering digunakan di media elektronik seperti web.Jenis Font Monospace
Font berjenis ‘monospace’ adalah tipe font yang lebar setiap karakternya sama panjangnya. Huruf ‘i’ akan mengambil panjang yang sama dengan huruf ‘w’. Contoh dari font jenis ini adalah Courier, Courier New, dan Andale Mono. Biasanya font jenis ini digunakan untuk hal yang bersifat teknis, seperti penulisan contoh kode program.Jenis Font Cursive
Font jenis ‘cursive’ adalah jenis font yang ‘meniru’ tulisan tangan atau kaligrafi. Contoh dari font ini adalah Comic Sans. Font jenis ini biasanya digunakan untuk aspek tulisan yang tidak terlalu ‘formal’.Jenis Font Fantasy
Font dengan jenis ‘fantasy’ adalah font yang bersifat visual dengan karakter font khusus seperti font disney, matrix, dll. Font jenis ini jarang digunakan untuk text halaman.
Cara Mengubah Jenis Font dengan Property font-family
Untuk menentukan jenis font dari sebuah text HTML, kita bisa menggunakan property CSS : font-family. Berikut adalah contoh penulisan kode CSSnya :<style type="text/css">body { font-family: Arial; }p { font-family: Courier, monospace; }div { font-family: “Duru Sans”, Verdana, sans-serif; }<style>Seperti yang terlihat, nilai yang didukung oleh property font-family adalah nama-nama font yang diinginkan. Saya menyebutnya ‘nama-nama’ karena kita bisa memberikan lebih dari 1 nama font untuk 1 jenis elemen HTML.
Tujuan dari memberikan lebih dari 1 font, terkait dengan pembahasan pada bagian awal tutorial ini, yakni tentang keterbatasan font yang terdapat di dalam komputer pengunjung web kita.
Ketika kita mendefenisikan nilai font-family sebagai: “Duru Sans”, Verdana, sans-serif, dapat dilihat bahwa terdapat 3 jenis font, yakni font Duru Sans, font Verdana, dan font sans-serif.
Web browser pertama kali akan mencoba ‘mencari’ font dengan nama “Duru Sans” di komputer user (pengunjung web) jika tidak ditemukan, maka web browser akan mencari font di urutan selanjutnya, yakni font Verdana. Dan jika tidak ditemukan juga, maka web browser akan menampilkan font dengan jenis generik: sans-serif.
Font jenis generik ini bisa bernilai 1 dari nilai berikut: serif, sans-serif, monospace, cursive, dan fantasy. Jika kita menuliskan font-family: serif, maka web browser akan mencari font standar dengan kategori serif yang terdapat di dalam komputer user. Penulisan font generik ini biasanya digunakan sebagai pilihan terakhir dalam nilai font-family.
CSS tidak membatasi seberapa banyak jenis font yang boleh ’disiapkan’ untuk nilai font-family. Kita bahkan bisa menulis 10 jenis font untuk 1 nilai font-family. Namun rata-rata web designer hanya membuat 3 pilihan, dimulai dari yang paling spesifik, sampai dengan jenis font yang paling umum (jenis font generik).
Dalam memberikan nilai untuk nama font, terdapat beberapa aturan penulisan. Aturan tersebut adalah sebagai berikut:
- Untuk setiap penulisan nama font, huruf pertama pada tiap kata harus menggunakan huruf besar, contohnya: penulisan font “arial” harus ditulis menjadi “Arial” . Tetapi aturan ini tidak berlaku untuk font ‘generik’ seperti monospace dan sans-serif.
- Untuk memisahkan antara satu font dengan font lainnya, gunakan tanda koma.
- Jika nama font memiliki spasi, maka harus ditulis didalam tanda kutip, seperti: ”Times New Roman”.
Contoh penggunaan property font-family CSS dengan HTML
Untuk melengkapi tutorial cara mengubah jenis font HTML menggunakan CSS, kita akan langsung mempraktekkannya menggunakan contoh program.Berikut adalah contoh penggunaan property font-family dalam CSS:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Belajar CSS di infoku.net</title> <style type="text/css">body { font-family: Calibri, Helvetica, Arial, sans-serif; }h3 { font-family: Cambria,"Times New Roman",serif; }#paragraf2 { font-family: Georgia, serif; }</style> </head> <body><h3>Belajar CSS: font-family</h3><p id="paragraf1"><strong>HTML dan CSS</strong>merupakan bagian tak terpisahkan dari website modern saat ini.HTML digunakan untuk membuat konten atau kerangka logis dari halaman web,sedangkan CSS digunakan untuk mengatur tampilan dari website,seperti warna dan font yang digunakan.<p><p id="paragraf2">CSS biasanya selalu dikaitkan dengan HTML,karena keduanya memang saling melengkapi. HTML ditujukan untuk membuat struktur,atau konten dari halaman web.Sedangkan CSS digunakan untuk tampilan dari halaman web tersebut.Istilahnya, <em>HTML for content, CSS for Presentation</em>.</p></body></html>
Cara Menggunakan Font External dengan CSS (@font-face)
Jika pada tutorial CSS sebelumnya kita telah mempelajari cara mengubah jenis tulisan (font) text HTML dengan menggunakan font lokal, maka dalam tutorial CSS kali ini kita akan membahas tentang cara mengubah jenis font text HTML dengan menggunakan font yang ‘diinput’ dari luar, yakni cara Menggunakan Font External dengan CSS.
Mengenal Perintah @font-face dalam CSS
Property font-family yang telah kita pelajari dalam tutorial sebelumnya, membatasi jenis font yang dapat dipilih kedalam beberapa font umum yang terinstall di dalam komputer, seperti font arial, helvetica atau times new roman. Namun, bagaimana caranya jika kita ingin menggunakan font ‘khusus’ yang unik agar sesuai dengan tema web?Untuk hal ini, CSS memiliki fitur untuk memasukkan font external ke dalam CSS, yakni dengan perintah @font-face dan property font-family.
Namun sebelum membuat kode CSSnya, kita akan membahas sedikit tentang tipe-tipe format font yang didukung oleh web browser.
Format dan Jenis Font dalam CSS
Percaya atau tidak, Internet Explorer telah mendukung penggunaan font external dalam CSS sejak IE versi 5 yang dirilis 12 tahun lalu. Namun untuk membuat web browser ‘mengerti’ font external memerlukan metode yang sulit. Salah satu penyebabnya adalah karena perbedaan format font yang didukung oleh web browser.Terdapat beberapa jenis format font yang bisa digunakan untuk web browser:
EOT (Embedded Open Type)
EOT adalah format font yang hanya didukung oleh Internet Explorer, dan relatif jarang digunakan. Untuk dapat mengubah format font menjadi EOT, kita membutuhkan aplikasi khusus seperti yang disediakan pada situs www.fontsquirrel.comTTF (True Type) and OTF (Open Type)
Jika anda membuka folder font di dalam komputer, maka sebagian besar akan memiliki extensi: .ttf (True Type) atau .otf (Open Type). Kedua format font ini merupakan format font yang paling banyak digunakan. Format TTF dan OTF didukung oleh banyak web browser seperti: IE 9 dan diatasnya, Firefox, Chrome, Safari, Opera, iOS Safari (versi 4.2 dan diatasnya), Android, dan Blackberry Browser.WOFF (Web Open Font Format)
Format font WOFF merupakan jenis format paling baru dan didesain secara khusus untuk keperluan web. WOFF pada dasarnya adalah versi kompresi dari format TTF dan OTF. WOFF memiliki ukuran lebih kecil dan akan didownload dengan lebih cepat. WOFF di dukung oleh web browser seperti: IE 9 dan diatasnya, Firefox, Chrome, Safari, Opera, Blackberry browser, and iOS Safari versi 5 dan diatasnya. Namun yang menjadi catatan adalah Android. Dengan kata lain, jika anda menggunakan format WOFF, web browser dalam Android dan IE 8 kebawah tidak akan bisa mengaksesnya.SVG (Scalable Vector Graphic)
Format SVG bukan merupakan format khusus untuk font, melainkan format untuk menyimpan gambar vector (jenis gambar yang bisa di zoom tanpa merubah kualitasnya). Format font SVG tidak didukung oleh IE dan juga Firefox. Satu-satunya alasan menggunakan format SVG untuk font adalah untuk iOS Safari versi 4.1 atau sebelumnya.Dengan berbagai jenis format font tersebut, untuk dapat menggunakan font external dengan CSS, kita terpaksa akan menggunakan ‘trik’ khusus.
Tutorial Cara Menggunakan Font External dalam CSS
Sebagai tutorial cara menggunakan font external dengan CSS, kita terlebih dahulu harus menyiapkan font yang akan digunakan. Dalam tutorial kali ini saya akan menggunakan font : DIGITAL-7_2.TTF. Font ini saya ambil dari folder font dalam sistem Windows 7. Anda boleh bebas menggunakan font jenis lain, namun letakkan di dalam folder yang sama dengan kode HTML yang akan kita buat agar mudah mengetikkan lokasi file font-nya.
<!DOCTYPE html><html><head><title>Belajar Font External CSS</title><style type="text/css"> @font-face { font-family: "Font Digital"; src: url('DIGITAL-7_2.TTF'); } .digital { font-family: "Font Digital"; }</style></head> <body> <h2>Belajar Font External CSS</h2> <h3>Font reguler:</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet.</p> <h3>Font external (digital):</h3> <p class="digital">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet.</p></body></html>
@font-face { font-family: "Font Digital"; src: url('DIGITAL-7_2.TTF');}Untuk dapat menggunakan font external tersebut, kita membutuhkan ‘pemanggilan’ property CSS tambahan dengan kode:
.digital { font-family: "Font Digital";} |
Mengatasi keterbatasan dukungan format Font
Seperti yang telah saya bahas di awal tutorial ini, web browser IE 8 kebawah dan beberapa versi safari web browser tidak mendukung format font TTF. Lalu bagaimana cara mengakalinya?Untuk keperluan ini, kita ‘terpaksa’ membuat kode CSS dengan menulis dan menggunakan semua format font yang ada. Berikut adalah perubahan kode CSS yang diperlukan untuk hal ini:
@font-face { font-family: 'Font Digital'; src: url('digital-7_2-webfont.eot'); src: url('digital-7_2-webfont.eot?#iefix') format('embedded-opentype'), url('digital-7_2-webfont.woff') format('woff'), url('digital-7_2-webfont.ttf') format('truetype'), url('digital-7_2-webfont.svg') format('svg');}Dapat dilihat dari kode diatas, saya menggunakan ke-4 format font untuk font DIGITAL-7_2. Untuk keperluan tersebut, saya harus menkonversi format font DIGITAL-7_2.TFF menjadi format lain dan menempatkannya di dalam folder yang sama.
Untuk menkonversi berbagai format font ini, anda bisa menggunakan aplikasi dari http://www.fontsquirrel.com/tools/webfont-generator.
Cara Menggunakan Google Font dengan CSS
Mengenal Google Font
Google Font adalah salah satu layanan yang disediakan Google untuk memudahkan web developer dalam menghasilkan desain yang menarik dengan meyediakan font-font gratis. Fitur ini dapat anda akses pada alamat: https://www.google.com/fonts.Saat tutorial ini ditulis, Google font menyediakan lebih dari 640 jenis font.
Perlu menjadi catatan bahwa jika anda menggunakan google font, maka font hanya tampil ketika halaman HTML terkoneksi dengan internet. Jika anda mengerjakan tugas/proyek yang akan ditampilkan secara offline, sebaiknya menggunakan font external dengan perintah @font-face yang telah kita pelajari dalam tutorial Cara Menggunakan Font External dengan CSS (@font-face).
Tutorial Memilih Font dari Google Font
Untuk dapat menggunakan font yang disediakan oleh google, langkah pertama adalah memilih font yang akan digunakan. Silahkan buka situs Google Font di alamat: https://www.google.com/fonts.
Di dalam halaman awal, anda akan langsung berhadapan dengan menu pencarian font. Silahkan mencoba-coba fitur pencarian yang ada dan melihat-lihat kategori font yang tersedia.
Jika telah menemukan font yang diiginkan, klik tombol “Add to Collection” pada font tersebut. Google akan menyimpan sementara font tersebut (mirip fitur cart pada situs online shopping). Anda boleh mencari font lain atau langsung menggunakan font tersebut. Dalam tutorial ini saya memilih untuk menggunakan 2 jenis font, yaitu Open-Sans dan Lobster.
Opsi pertama adalah memilih jenis-jenis huruf untuk font. Apakah font yang anda ingin gunakan mencakup tulisan tebal (bold), miring (italic), atau keduanya (bold dan italic).
Opsi ke-dua adalah memilih karakter-set. Jika anda tidak membuat web yang akan menggunakan huruf china atau jepang, biarkan pilihan ini sesuai dengan defaultnya (latin).
Opsi ke-tiga adalah memilih cara ‘menghubungkan’ Google font dengan halaman HTML kita. Google menyediakan 3 cara, yakni dengan menggunakan tag <link>, perintah CSS @import, dan dengan JavaScript. Ketiga cara ini relatif tidak terlalu berbeda dari cara penggunaanya. Anda tinggal copy paste kode tersebut ke halaman HTML. Untuk kali ini, saya akan menggunakan cara dengan tag <link>. Silahkan copy kode tersebut ke dalam bagian <head> HTML.
Sampai disini, kita sudah bisa langsung menggunakan font tersebut.
Tutorial Cara Menggunakan Google Font
Setelah memilih jenis font dan cara yang akan digunakan, maka kita akan langsung mencobanya dengan kode CSS. Berikut adalah kode HTML dan CSS yang saya gunakan:<!DOCTYPE html><html><head><title>Belajar Google Font</title><link href='http://fonts.googleapis.com/css?family=Lobster|Open+Sans'rel='stylesheet' type='text/css'><style type="text/css"> .open{ font-family: 'Open Sans', sans-serif; } .lobster{ font-family: 'Lobster', cursive; }</style></head><body> <h2>Belajar Google Font</h2> <h3>Font reguler:</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet.</p> <h3>Font Open Sans:</h3> <p class="open">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet.</p> <h3>Font Lobster:</h3> <p class="lobster">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet.</p></body></html>
Kode <link href=’http://fonts.googleapis.com/css?family=Lobster|Open+Sans’ rel=’stylesheet’ type=’text/css’> sebenarnya adalah link menuju CSS external yang disediakan oleh google. Kita tidak perlu mengutak-atik link ini.
Untuk menggunakan font tersebut, kita tinggal memanggil property font-family dengan nama font yang telah disediakan oleh google.
Menggunakan font dari Google sering digunakan sebagai cara untuk memperindah tampilan website dengan menggunakan jenis tulisan yang unik dan mudah dibaca.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
silahkan berkomentar bila ada yang ingin di tanyakan . ConversionConversion EmoticonEmoticon