Iso Web Id Tutorial Komputer
Google sudah lama membuat fasilitas ini akan tetapi jarang sekali dimanfaatkan oleh para web designer mungkin alasannya berat atau tidak bisa offline. Benar saja fasilitas dari google ini (googel font) hanya dapat dimanfaatkan jika website sudah production (Publikasi), akan tetapi hampir katakan dirumah maupun kantor kalian pasti sudah terhubung dengan internet (Meski tidak semuanya).
Apa manfaat yang didapat dari google font ini?
- Dipastikan font – font yang kalian pakai akan berbeda dengan website – website lain
- Website akan terlihat semakin menarik.
- Menambah pengalaman baru dalam membuat portofolio.
- Masuk ke website google font (klik disini)
- Pilih font yang akan kalian pakai kemudian klik Add Colection.
- Klik tombol USE bila sudah memilih.
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Tangerine”>
@import url(http://fonts.googleapis.com/css?family=Tangerine);
<script type=”text/javascript”>WebFontConfig = {google: { families: [ ‘Tangerine” ] }};(function() {var wf = document.createElement(‘script’);wf.src = (‘https:’ == document.location.protocol ? ‘https’ : ‘http’) +‘://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js’;wf.type = ‘text/javascript’;wf.async = ‘true’;var s = document.getElementsByTagName(‘script’)[0];s.parentNode.insertBefore(wf, s);})(); </script>
Kalian dapat memilih ketiga mode diatas, pada artikel kali ini kita coba dengan mode yang pertama. Saatnya kita mencoba inplemetasikan dalam bentuk html.
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Tangerine”>
<style>
body {
font-size:48px;
font-family: ‘Tangerine’, serif;
text-shadow: 4px 4px 4px #aaa;
}
</style>
</head>
<body>
<h1>Selamat datang di website saya</h1>
</body>
</html>
<html><head><link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans|Averia+Gruesa+Libre”><style>body{font-size:48px;}h1{ font-family: ‘Tangerine’, serif;}h2{ font-family: ‘Droid Sans’;}</style></head><body><h1>Selamat datang di website saya</h1><h2>lagi belajar Googel font</h2></body></html>
<html><head><link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans|Averia+Gruesa+Libre”><style>body {font:normal 12px Arial,Helvetica,Sans-Serif;width:800px;margin:10px auto;}h1{font-family: ‘Tangerine’, serif; text-shadow: 4px 4px 4px #aaa;font-size:48px;font-weight:normal;border-bottom:1px solid #CCC;}#wrap{width:100%}h2{font:normal 18px ‘Averia Gruesa Libre’;}h3{font:normal 13px;font-family:’Averia Gruesa Libre’, Serif;background-color:#CCC;padding:5px;margin-bottom:0;}.clear{clear:both;}.left_column{width:200px;border-right:1px solid #999;min-height:200px;float:left;vertical-align:top;}.box{width:190px;}.box ul{list-style:none;padding:0;margin:0;}.box ul li{padding: 3px 0;}.box ul li a{display:block;text-decoration:none;background-color:#F5F5F5;padding:5px;}.box ul li a:hover{text-decoration:underline;}.content_column{float:right;width:590px;margin:0;padding:0;}</style></head><body><h1>Selamat datang di website saya</h1><div id=”wrap”><div class=”left_column”><div class=”box”><h3>Menu Utama</h3><ul><li><a href=”#”>Home</a></li><li><a href=”#”>About me</a></li><li><a href=”#”>News</a></li><li><a href=”#”>Contact me</a></li></ul></div></div><div class=”content_column”><h2>Belajar Google Font</h2>Google font sangat mmudah dipelajari sekaligus dapat mempercantik website kita.</div><div class=”clear”></div></div></body></html>
