PENGERTIAN
SleepingCodings - Font artinya ialah gaya tulisan. Maksudnya font merupakan sebuah gaya tulisan yang lebih efektif dan lebih interaktif dan tentunya memberikan sebuah kesan ketika temen" membuka website tersebut.
LATAR BELAKANG
Author membuat tutorial Cara Mengganti Font Dengan CSS gunanya agar temen" dan Author saling belajar untuk menemukan hal baru setiap harinya.
MAKSUD DAN TUJUAN
1. Dapat mengubah Font di website dengan menggunakan CSS.
2. Dapat memiliki suatu kreatifitas yang baru dalam membuat website dengan mengganti font agar lebih menarik.
ALAT DAN BAHAN
1. 1 unit PC / Laptop.
2. Font yang beraneka ragam. bisa download link disini :
a. 1001freefonts
b. googlefonts
3. Brainware (kecerdasan emosional).
PEMBAHASAN
Untuk mengganti font dengan CSS yang pertama yang harus teman-teman lakukan adalah mendapatkan dan memilih font yang diinginkan terlebih dahulu. Temen" bisa download di link atas tadi (sewaktu Alat Dan Bahan).
Nah, untuk cara mengubah atau mengganti font dengan CSS sendiri, temen" bisa menggunakan property "font-family" dan kemudian di isikan valuenya yaitu nama font yang ingin temen" gunakan di halaman website. Nah, untuk contoh tmen" bisa lihat source code beserta hasil dari source code tersebut.
index.html
<!DOCTYPE html>
<html>
<head>
<title>SleepingCodings</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Cara Mengganti/Mengubah Font dengan CSS</h1>
<div class="konten">
<hr>
<h2>Cara Mengganti Font Dengan CSS</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</body>
</html>
style.css
body {
background: #35A9DB;
font-family: pacifico;
text-align: center;
color: #fff;
}
.konten {
margin: 10px auto;
width: 90%;
}
h2 {
font-family: courier;
}
p {
font-family: arial;
}
Dan ketika di jalankan di web browser maka akan muncul seperti gambar di bawah :
 |
| Gambar 1.1 Font CSS SleepingCodings |
KESIMPULAN
Nah, jadi penggunaannya sangat gampangkan ?, kita tinggal mendownloadnya saja lalu memanggilnya.
Semoga Bermanfaat ~
Wassalamu'laikum Wr. Wb
No comments:
Post a Comment