Cara Memasukan Font Gres Ke Dalam Web Memakai Css

19 views

Ini merupakan tutorial pertama aku di JagoCoding. Oleh alasannya yaitu itu aku mohon maaf bila ada kesalahan di dalam penulisan tutorial aku kedepannya. Oke eksklusif saja, menyerupai yang kita ketahui terkadang seorang visitor yang berkunjung ke website ataupun blog sangat nyaman dengan isu yang di berikan oleh blog atau web tersebut. Tetapi terkadang sebuah web/blog yang mempunyai isu anggun tetapi penyampaianya yang kurang anggun contohnya font yang di gunakan sulit untuk di baca sehingga memperlihatkan kesan kurang nyaman terhadap pembaca.

Menghias blog/web boleh saja tetapi tentunya juga harus memperhatikan kenyamanan visitor yang akan berkunjung ke web anda. Oleh alasannya yaitu itu kita harus menyediakan isu yang anggun sekaligus penyampaiannya yang anggun termasuk kita harus menentukan font yang sesuai untuk di baca dan dengan ukuran yang sesuai pula. Oleh alasannya yaitu itu pada tutorial kali ini aku akan mengajak anda sekalian untuk memasukan font gres yang nyaman untuk di baca nantinya.

Sebagai teladan marilah kita buat sebuah folder yang berjulukan teladan lalu di dalam folder tersebut kita buat 2 buah folder yaitu folder yang berjulukan font dan style.

1. Siapkan dulu font yang sesuai (di sini aku menyarankan untuk mengunakan font ptsans.woff).

2. masukan font tersebut kedalam folder font. Buatlah saja namanya ptsans.

3. buka dreamweaver/notepad lalu buat file html berikan namanya index.html. Untuk mempermudah berikut kodingnya.

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Contoh</title><link rel="stylesheet" type="text/css" href="style/style.css"/></head><body><div id="wrapper"><div class="header"><h1>Import Font</h1><h6>Ayo Kita Belajar Import Font</h6></div><div class="menu"><ul><li><a href="#">Danganronpa</a></li><li><a href="#">One Piece</a></li><li><a href="#">Naruto</a></li><li><a href="#">Yowamushi Pedal</a></li><li><a href="#">D-Frag</a></li></ul></div><div class="content"><div class="sidebar"><div class="widget"><div class="judul-widget"><h6>Searching</h6></div><div class="isi-widget"><form action="#" method="get"><input name="search" type="search" placeholder="Insert Query & Enter"></form></div></div></div><div class="main-content"><div class="posting"><div class="judul-posting"><h1>Danganronpa The Animation</h1></div><div class="isi posting"><p>Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero</p> <br/><p>Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero </p></div><div class="footer-posting">Posting Date : Selasa, 08-07-2014</div></div><div class="posting"><div class="judul-posting"><h1>One Piece</h1></div><div class="isi posting"><p>Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero</p> <br/><p>Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero </p></div><div class="footer-posting">Posting Date : Selasa, 08-07-2014</div></div><div class="posting"><div class="judul-posting"><h1>Yowamushi Pedal</h1></div><div class="isi posting"><p>Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero</p> <br/><p>Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero Loram Ipsun Dolor Argero Rogero </p></div><div class="footer-posting">Posting Date : Selasa, 08-07-2014</div></div></div></div><div class="footer"><footer>Create By Rahmat (R-Studio)</footer></div></div></body></html>

Kemudian simpan koding tersebut di dalam folder contoh.

4.kemudian buat juga sebuah file css berikan namanya style.css. berikut kodingnya

/********************************This Is Create By Rahmat.Author Url : www.rahmat-know.blogspot.com********************************/@font-face{font-family:'ptsans'; src:url(../font/ptsans.woff);} /* Kode Import Font */*{margin:0px; padding:0px;}body{ background:#333; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000;}#wrapper{max-width:1024px; background:#FFF; margin:0px auto;}h1{font-size:24px;} h6{font-size:16px;} a{text-decoration:none; color:#666;} a:hover{text-decoration:underline;}.header{ position:relative; background:#F93; color:#FFF; height:100px;}.menu{position:relative; height:50px; background:#FFC;}.menu li{display:inline; list-style:none; line-height:50px; margin-left:10px;}.content {position:relative; padding:20px;}.main-content{max-width:680px; margin-right:10px;}.sidebar{max-width:300px; float:right;}.posting{font-family:ptsans; font-size:16px; text-align:justify;}.judul-posting{border-bottom:2px dotted #FF9900; margin-bottom:5px;}.footer-posting{border-top:2px dotted #FF9900; border-bottom:2px dotted #FF9900; margin:5px 0px 15px 0px;}.footer{background:#F93; text-align:center; font-size:16px; height:30px;}.widget{width:280px; float:left; margin-left:20px; border:1px solid #FF9900; padding:5px;}.judul-widget{position:relative; background:#FFC; padding:5px; margin-bottom:5px;}input{width:100%; height:25px; margin-bottom:5px;}

Kemudian simpan file tersebut di dalam folder style.

Di sana terdapat syntax @font-face itulah syntax yang memungkinkan kita untuk mengimport font jenis gres ke dalam web kita.

 

Berikut beberapa screenshoot perbandingan antara saat di import dengan default.

 

 

Terimakasih telah membaca tutorial aku kali ini biar bermanfaat. Dan selamat menjalankan ibadah puasa. 

Author: 
    author
    No related post!