Menampilkan font berbeda di web (non-system font)

Bismillah. Alhamdulillah, ana masih diberi kesempatan untuk hidup oleh Allah ‘Azza Wa Jalla,

insyaAllah, posting kali ini berkaitan dengan design web, khususnya pada CSS (cascading styling sheet) ‘afwan, kalo ana salah ketik, masalahnya ana juga masih belum bener-bener paham hehe.

Langsung saja, mungkin antum bingung dengan font non-system, bagi antum yang baru belajar tentang desain-desain khususnya web maka tak lepas dari CSSm istilahnya kalo menurut ana DNA-nya web heheh.

Tentunya font non-system ialah font yang gak ada di system komputer yang sedang buka web kita, sehingga apa yang terjadi? tentu saja font kita menjadi berantakan atau font yang muncul tidak sesuai

Nah, keliatan-kan bedanya? antara tulisan arab di dalam kotak hitam dan hijau?

Penjelasan:

  1. tulisan pada kotak yang hitam tersebut tentu, ketika ana membukanya di localhost tidak ada jenis fontnya di system laptop ana

CSS yang ana gunakan

blockquote .arab {
font-familiy: “Microsoft Uighur Regular”;
font-size:2em;
line-height:1.3em;
font-weight:normal;
}

2. mungkin akan muncul font seperti dalam kotak hijau jika system komputer terinstall font tersebut.

Solusinya agar font yang kita inginkan bisa mucul dan ini tidak hanya untuk font arabic saja,

  1. copy file font yang kita inginkan -> bikin folder baru -> paste ke folder tersebut kemudian beri nama dalam hal ini “font”
  2. pindahkan folder “font” yang kita buat dan berisi font tadi kedalam folder theme kita (ana pake wordpress)
  3. tambahkan CSS nya

@font-face {
font-family: “Microsoft Uighur Regular”;             //silahkan beri nama sesuai keinginan gak masalah
src: url(‘font/msu.ttf’) format(‘opentype’);         //dierectori font kita
font-weight: normal;
font-style: normal;
}

kemudian tambahkan lagi CSS

.arab {
font-familiy: “Microsoft Uighur Regular”;            //sesuaikan dengan nama font-family pada tag@font-face nya
font-size:2em;
line-height:1.3em;
font-weight:normal;
}

nah, insyaAllah setiap font arabic  dengan class .arab

<div class=”arab”>tulisan antum</div>

maka secara otomatis akan menampilkan font “Microsoft Uighur Regular” yang kita pilih tadi, untuk memberikan tampilan yang cocok karena itu tulisan arab, maka tambahkan pada cssnya (

direction:rtl; float:right

agar posisi tulisan ada di kanan dan tulisan tersebut dari kanan ke kiri (rtl -> right to left)

mudah-mudahan antum ndak bingung karena penjelasan ana yang mbulet, ‘afwan jiddan akh ana ndak maksud, hanya ana memang kurang kalo disuruh menjelaskan. ‘afwan, ‘afwan. untuk lebih jelasnya silahkan search di pakde atao om google.

biar lebih jelas, ana sertakan file contohnya dan antum bisa langsung praktek

Download: Contoh Non-System Font (ZIP File)

  1. Index HTML
  2. Fonts (Uighur dan Traditional)

Wassalam

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: