#11 CSS – Fonts

Untuk mengubah jenis font pada halaman html kita bisa menggunakan google fonts. Berikut cara menggunakan google fonts :

1. Pergi ke https://fonts.google.com
2. Pilih jenis font yang diinginkan

googlefonts

3. Copy link font yang telah dipilih kedalam tag <head></head>
4. Copy font-family kedalam halaman css, sebagai contoh kita akan mengganti jenis font h1

<!DOCTYPE html>
<html>

<head>
    <title>Fonts</title>
    <link rel="stylesheet" type="text/css" media="screen" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
</head>

<body>
    <h1>H1 menggunakan font default</h1>
    <h1 class="ubah">H1 menggunakan googlefont</h1>
</body>

</html>

file style.css

h1.ubah {
    font-family: 'Indie Flower', cursive;
}

Berikut hasil dari h1 yang menggunakan font dari googlefonts :

h1 googlefonts
googlefonts

Font-Size

font-size merupakan property pada font yang digunakan untuk mengatur ukuran dari suatu teks baik heading maupun paragraf.

file index.html

<!DOCTYPE html>
<html>

<head>
    <title>Fonts</title>
    <link rel="stylesheet" type="text/css" media="screen" href="style.css">
</head>

<body>
    <h1>H1 ukuran default</h1>
    <h1 class="ubah">H1 ukuran 100px</h1>
</body>

</html>

file style.css

h1.ubah {
    font-size: 100px;
}

Berikut tampilan h1 menggunakan ukuran 100px :

Tinggalkan sebuah komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *