Hei..Hei! Akhirnya, baru sempet nulis disini (@jagocoding). Padahal, udah jadi member dari kapan tahu :D. Well, sebelum pembahasan terlalu panjang, panggil aja Kenu (ane) akan bahas tentang "install font di css". Namun, Anda harus tahu terlebih dahulu apa itu CSS & Font ? Apa itu CSS ? Cascading Style Sheet (CSS) merupakan aturan...

Install Font On Your CSS

Hei..Hei!

Akhirnya, baru sempet nulis disini (@jagocoding). Padahal, udah jadi member dari kapan tahu :D. Well, sebelum pembahasan terlalu panjang, panggil aja Kenu (ane) yang akan membahas tentang "install font di css". Namun, Anda harus tahu terlebih dahulu apa itu CSS & Font ?

  • Apa itu CSS ?

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

  • Apa itu Font ?

Huruf / Font merupakan bentuk visual yang dibunyikan sebagai kebutuhan komunikasi verbal.

Nah! Sekarang Anda sudah tahukan? Apa itu CSS & Font.. Kalau Anda sudah tahu sebelumnya, semoga ini menjadikan Anda lebih tahu lagi :D. Soto do point aja deh sekarang kita mulai dengan membuat folder dengan nama font_css / terserah Anda, namun harus disesuaikan ya! Lalu buatlah sebuah file html dengan nama index.html didalam folder font_css.

Lalu, buatlah folder lagi didalam folder font_css dengan nama css. Kemudian, didalam folder css tersebut buatlah sebuah file css dengan nama font.css dengan kode seperti dibawah ini (disarankan diketik) :

/* Kenu Document */
body {
	background-color: #fff;
}

#wrapper {
	height: auto;
	min-height: 100px;
	width: 30%;
	margin: auto;
	padding-top: 15%;
}

#wrapper #header {
	height: 80px;
	width: auto;
	background-color: #4682B4; /* Steel Blue */
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	margin-bottom: 0px;
	padding: 10px 10px 0px 10px;
	text-align: center;
	color: #ffffff;
}

#wrapper #main {
	height: auto;
	min-height: 20px;
	width: auto;
	background-color: #ffffff;
	margin-bottom: 0px;
	border: solid thin #4682B4; /* Steel Blue */
	text-align: center;
	padding: 10px;
}

#wrapper #footer {
	height: auto;
	min-height: 10px;
	text-align: center;
	background-color: #4682B4; /* Steel Blue */
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	color: #ffffff;
}

#footer a {
	text-decoration: none;
	color: #FFF;
}

#footer a:hover {
	color: #CCC;
}

Jika kode diatas sudah Anda ketik dan tuliskan, yuk lanjut lagi! :D Mudah-mudahan, belum pegel ya :P

Sekarang, keluar dari folder css pindah ke folder font_css, lalu buka file index.html dan isikan kode seperti dibawah ini ya (diketik loh!):

<!doctype html>
<html>
	<head>
    <meta charset="utf-8">
		<title>Install Font On Your CSS</title>
		<link rel="stylesheet" type="text/css" href="css/font.css"> <!--CSS-->
	</head>

	<body>
		<div id="wrapper"> <!--WRAPPER-->
			<div id="header"> <!--HEADER-->
			  <h2>&#8224; How to install font ? &#8224;</h2>
			</div> <!--HEADER-->
			<div id="main"> <!--MAIN-->
			  <p class="eastmarket">Font in here 1</p>
			  <p class="boycott">Font in here 2</p>
			  <p class="madisi">Font in here 3</p>
			</div> <!--MAIN-->
			<div id="footer">&laquo; &copy; <a href="http://kode.id1945.com" target="_blank">Isnu Arief Darmawan</a> &raquo;</div> <!--FOOTER-->
		</div>
	</body> <!--WRAPPER-->
</html>

Jika, sudah..mari lanjut ketahap yang lebih intim :D #waow  sekarang Anda harus mendownload folder font ini (klik!), karena inti dari pembahasan ada disitu.. Oyaa, didalamnya terdapat 3 jenis font yang berbeda dengan format woff, diantaranya:

  1. BOYCOTT.woff
  2. MADISI__.woff
  3. EastMarket.woff

Jika sudah! Taruh folder font tersebut didalam folder css loh! Setelah itu, buka kembali file font.css Anda. Lalu tambahkan kode dibawah ini (disarankan untuk diketik):

/* INSTALL FONT HERE */
@font-face {
	font-family: EastMarket;
	font-style: normal;
	font-weight: normal;
	src: local('EastMarket Regular'), url(font/eastmarket.woff) format('woff');
}

@font-face {
	font-family: Boycott;
	font-style: normal;
	font-weight: normal;
	src: local('Boycott Regular'), url(font/BOYCOTT_.woff) format('woff');
}

@font-face {
	font-family: Madisi;
	font-style: normal;
	font-weight: normal;
	src: local('Blackr Regular'), url(font/MADISI__.woff) format('woff');
}

/* FONT STYLE */
.eastmarket {
	font-family: EastMarket;
	font-size: 20px;
}
.boycott {
	font-family: Boycott;
	font-size: 20px;
}
.madisi {
	font-family: Madisi;
	font-size: 20px;
}

Akhirnya selesai juga :D dengan struktur folder dan isi seperti ini:

-----------------------------------------

{font_css} //folder
--->index.html
--->{css} //folder
------>font.css
------>{font} //folder
--------->BOYCOTT.woff
--------->EastMarket.woff
--------->MADISI__.woff

-----------------------------------------

Download Full Source Code

 

 

 

"Jangan pernah berhenti untuk belajar, selagi Anda masih memilik umur"

Om' Kenu




Sumber:  Sini 1, 2.


About Author

Isnu Arief Darmawan

Simple person..


Comment & Discussions

  • saya tidak mengerti om .apa itu yg harus di download ?

  • Saefuloh Kurniawan
    Pake engine fontsquirell lebih baik :v ... cuman size-nya itu lo ...

  • Freddy Sidauruk
    belum nangkap fungsi nya instal font ini, tapi gak apa-apa siapa tahu ada wangsit jadi ngerti

    • Cecep Yusuf

      fungsinya agar kita embed font secara lokal, jadi kita bisa mengubah font di website dengan apa aja menggunakan CSS


  • Freddy Sidauruk
    Request donk tentang fixed yang header, sidebar dan footer :D

    dan z-index, atau kasis tutorial yang ada case z-index dan position fixednya gan


    :D

  • hasan
    death link nih suhu.... ane mau download eh.... death link... :) keep writing suhu...

  • Please LOGIN before if you want to give the comment.