Selamat Datang

Mempercantik Tulisan di Website dengan Adobe Edge Font


Font sangat penting dalam sebuah website, font bisa membuat website menjadi terlihat menarik dan bisa juga tidak, itu tergantung bagaimana kita menempatkan dan menggunakan font dengan benar diwebsite yang kita buat.

Anda pasti sering mendengar istilah Typography, yap itu berkaitan dengan penggunaan font. Kali ini kita sedikit membahas tentang Typography di website.

Untuk di web design, saat ini banyak orang menggunakan Font-face di css untuk menentukan font apa yang akan digunakan dalam websitenya.

Banyak juga orang menggunakan service Google Web Fonts untuk mengembed font ke website mereka.

Namun saat ini ada service yang relatif lebih baru dan cukup menjanjikan dari Adobe, Adobe Edge nama nya.

Ada sekitar 500 font yang disediakan Adobe Edge saat ini, dan penggunaan nya pun mudah, kita hanya menyisipkan tag javascript yang mengarah ke file javascript yang ada di website adobe edge, dengan script  tersebut maka kita bisa menggunakan Font yang ada di Adobe Edge di website kita.

Kamu bisa membaca keterangan penggunaan nya di website ini http://www.edgefonts.com/

Berikut contoh penggunaan nya.

Sisipkan script berikut diantara head dan /head

<script src="http://use.edgefonts.net/strumpf-std.js"></script>

Maka sekarang kita bisa menggunakan font “strumpf-std” di setiap elemen yang kita inginkan di halaman website kita dengan bantuan CSS, contoh nya seperti berikut. Kita gunakan di tag h1,

h1 {
   font-family: strumpf-std, serif;
 }

Berikut demo yang kami telah buat

Buat sebuah file html, disini saya menggunakan adobe-edge.html
Sisipkan Javascript di tag head dan /head

	<script src="http://use.edgefonts.net/strumpf-std.js"></script> 
	<script src="http://use.edgefonts.net/droid-sans.js"></script> 

Kemudian Buat Struktur HTML nya seperti berikut ini

	<div class="container">
		<header>Demo Adobe Edge Font : <a href="http://www.tutorial-webdesign.com">tutorial-webdesign.com</a></header>
		<h1>Tutorial Web Design</h1>
		<p>Web Design & Web Development Indonesia</p>
	</div>

Kemudian kita percantik dengan CSS, pada contoh ini kami menaruh CSS di antara tag head, anda bisa juga menaruh nya di file css terpisah.

		body{
			font-family: droid-sans, serif;
			background: #f9f9f9;
		}
		.container{
			width: 500px;
			margin:50px auto;
			padding:10px;
			background: #fff000;
			background: -moz-linear-gradient(left, yellow, orange);
			background: -webkit-linear-gradient(left, yellow, orange);			
			text-align: center;
			-webkit-box-shadow: 0 8px 6px -6px #ddd;
			   -moz-box-shadow: 0 8px 6px -6px #ddd;
			        box-shadow: 0 8px 6px -6px #ddd;			
		}
		.container header{
			border-bottom: 2px solid orange;
			padding: 10px 0;
		}
		.container header a{
			text-decoration: none;
			font-weight: bold;
			color: #333;
		}
		.container h1{
			font-size: 40px;
			 font-family: strumpf-std, serif;
			 color:#333;
		}

DEMO

Sekian tutorial kali ini, semoga berguna

Salam Web Design Indonesia





Penulis :

I'm just simple person, web developer part time, web design holic, website researcher. Work in the world of websites & coding for eat : View all posts by Abuser

Comments

3 thoughts on “Mempercantik Tulisan di Website dengan Adobe Edge Font

  1. AhSyai says:

    menarik.. kapan2 dicoba lah.. biasanya cuma pake punya google.. :D

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development