Menghias blog/web boleh saja tetapi tentunya juga harus memperhatikan kenyamanan visitor yang akan berkunjung ke web anda. Oleh sebab itu kita harus menyediakan informasi yang bagus sekaligus penyampaiannya yang bagus termasuk kita harus memilih font yang sesuai untuk di baca dan dengan ukuran yang sesuai pula. Oleh sebab itu pada tutorial kali ini saya akan mengajak anda sekalian untuk memasukan font baru yang nyaman untuk di baca nantinya.

Cara Memasukan Font Baru Ke Dalam Web Menggunakan CSS

Ini merupakan tutorial pertama saya di JagoCoding. Oleh sebab itu saya mohon maaf jika ada kesalahan di dalam penulisan tutorial saya kedepannya. Oke langsung saja, seperti yang kita ketahui terkadang seorang visitor yang berkunjung ke website ataupun blog sangat nyaman dengan informasi yang di berikan oleh blog atau web tersebut. Tetapi terkadang sebuah web/blog yang memiliki informasi bagus tetapi penyampaianya yang kurang bagus misalnya font yang di gunakan sulit untuk di baca sehingga memberikan kesan kurang nyaman terhadap pembaca.

Menghias blog/web boleh saja tetapi tentunya juga harus memperhatikan kenyamanan visitor yang akan berkunjung ke web anda. Oleh sebab itu kita harus menyediakan informasi yang bagus sekaligus penyampaiannya yang bagus termasuk kita harus memilih font yang sesuai untuk di baca dan dengan ukuran yang sesuai pula. Oleh sebab itu pada tutorial kali ini saya akan mengajak anda sekalian untuk memasukan font baru yang nyaman untuk di baca nantinya.

Sebagai contoh marilah kita buat sebuah folder yang bernama contoh kemudian di dalam folder tersebut kita buat 2 buah folder yaitu folder yang bernama font dan style.

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

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

3. buka dreamweaver/notepad kemudian 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 baru ke dalam web kita.

 

Berikut beberapa screenshoot perbandingan antara ketika di import dengan default.

 Sebelum Pengaturan Font

Sesudah Pengaturan Font

 

Terimakasih telah membaca tutorial saya kali ini semoga bermanfaat. Dan selamat menjalankan ibadah puasa. 


About Author

Rahmat

Saya siswa SMK yang tertarik untuk mempeajari pemrogramana. khusunya di bidang website. sekarang saya mulai memperlajari HTML,CSS dan PHP walaupun masih sedikit.


Comment & Discussions

    Please LOGIN before if you want to give the comment.