Belajar CSS #7 Cara Mengatur Font di CSS

Setelah kita telah memahami tentang format text, maka Pada artikel CSS kali ini, saya akan menjelaskan cara mengatur font pada teks HTML. Font adalah jenis huruf yang ada di dalam sebuah dokumen. Ada beberapa properti yang akan saya bahas, diantaranya :

  • font-size untuk mengatur ukuran font;
  • font-weight untuk mengatur ketebalan font;
  • font-style untuk mengatur gaya font;
  • font-family untuk mengatur jenis font;

Mari kita bahas satu persatu..

Mengatur Ukuran Font di CSS

Pada CSS, kita dapat menggunakan properti font-size, untuk mengatur ukuran font. Properti ini bisa kita beri nilai dengan satuan px (piksel), % (persentase), em, dsb …

Contoh:

p {
   font-size: 20px;
  }

Keterangan :

Secara default ukuran font untuk elemen <p> adalah 16px, namun pada contoh diatas kita mengatur ukuran font pada elemen <p> sebesar 20px. Selain angka, ada beberapa nilai bawaan pada ukuran font seperti:

  • normal, untuk ukuran normal (16px);
  • small, untuk ukuran kecil;
  • large, ukuran besar;
  • x-large, untuk ekstra besar;
  • xx-large, ekstra-ekstra besar;
  • x-small untuk teks yang lebih kecil dari small;
  • xx-small, teks yang dua kali lebih kecil dari small;

Contoh :

Buatlah file HTML baru dengan nama font-size.html, kemudian salin dengan kode berikut ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Size</title>
  <style>
    h1 {
      font-size: 22px;
      color: red;
    }
    .font-big {
      font-size: large;
    }

    .font-small {
      font-size: small;
    }
  </style>
</head>
<body>
  <h1>Font Size</h1>
  <p class="font-big">Ini adalah teks dengan ukuran font besar</p>
  <p>Ini adalah teks dengan ukuran font normal</p>
  <p class="font-small">Ini adalah teks dengan ukuran font kecil</p>
</body>
</html>

Setelah itu, buka file font-size.html, maka hasilnya :

Mengatur Font di CSS

Keterangan :

Pada contoh tadi, kita sudah mengatur ukuran font pada elemen <h1> ukurannya sebesar 22px. Lalu ukuran font pada baris pertama adalah ”large” atau besar. Untuk baris kedua, kita tidak mengatur ukuran font-nya (normal 16px). Kemudian baria terakhir kita mengatur ukuran font-nya dengan small.

Mengatur Ketebalan Font

Properti CSS yang digunakan dalam mengatur ketebalan font adalah ”font-weight”. Properti ini dapat kita berikan nilai-nilai yang valid, seperti :

  • lighter untuk ketebalan yang tipis;
  • normal untuk ketebalan normal;
  • bold untuk membuat font lebih tabal;
  • bolder untuk membuat font lebih tebal lagi;
  • 100 sampai 900 rentang angka ketebalan.

Misalnya kita ingin mengatur ketebalan font semua elemen <p> dengan font yang lebih tebal, maka dapat ditulis seperti ini :

p{
  font-weight: bold;
 }

Contoh :

Buatlah file HTML baru dengan nama font-weight.html, kemudian salin dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Weight</title>
    <style>
        h1 {
            font-weight: bold;
        }

        .light {
            font-weight: lighter;
        }

        .bold {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Font Weight</h1>
    <p 
      class="light">Properti yang digunakan dalam mengatur ketebalan font adalah <span class= "bold">font-weight</span>
    </p>
</body>
</html>

Hasilnya :

Mengatur Font di CSS

Mengatur Font Style CSS

Properti font-style digunakan untuk mengatur agar teks miring. Di CSS, ada beberapa nilai yang valid untuk properti ini, yaitu :

  • normal – teks normal;
  • italic – teks miring (italic);
  • oblique – teks miring seperti italic;

Contoh:

Buatlah file baru dengan nama font-style.html, kemudian salin dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Style</title>
    <style>
        blockquote {
            font-style: italic;
            font-size: larger;
            color: blueviolet;
        }
        cite {
            font-size: small;
            font-style: normal;
            color: red;
        }
    </style>
</head>
<body>
    <h1>Font Style</h1>
    <blockquote>
        "Sejak dulu beginilah cinta, penderitaannya tiada akhir…". <cite>~Tian Feng</cite>
    </blockquote>
</body>
</html>

Hasilnya :

Mengatur Font di CSS

Pada contoh diatas, kita sudah mengatur font style pada elemen <blockquote> menjadi italic dan <cite> menjadi normal.

Mengatur Jenis Font

Untuk mengatur jenis font HTML menggunakan CSS yaitu dengan properti ”font-family”. Properti ini bisa kita isi dengan nama font ataupun diisi dengan nama family dari font tesebut.

Secara umum ada lima jenis family font, yakni :

  • Sans Serif – Font tanpa tanduk;
  • Serif – Font yang ujungnya punya tanduk;
  • Monospace – Font dengan ukuran space yang sama;
  • Cursive – Font seperti tulisan tangan;
  • Fantasy – Font dengan bentuk yang menarik.

Contoh :

Buatlah file baru dengan nama jenis-font.html, kemudian salin dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Style</title>
    <style>
        h1 {
            font-size: larger;
            color: blue;
        }
        p {
            font-family: cursive, Helvetica, sans-serif;
        }
    </style>
</head>
<body>
    <h1 style="font-family: cursive">Font Cursive</h1>
    <p>
        Jenis font cursive terlihat seperti tulisan tangan yang 
        didesain untuk digunakan dalam teks yang memadukan huruf 
        besar-kecil.
    </p>
</body>
</html>

Hasilnya :

Keterangan :

Perhatikan kode dibawah ini !

<h1 style="font-family: cursive">Font Cursive</h1>

Kita telah mengatur jenis font <h1> menggunakan nama family, Sedangkan pada elemen <p> kita telah mengatur jenis font dengan menggunakan nama font-nya secara langsung.

p {
   font-family: cursive, Helvetica, sans-serif;
  }

Pada elemen <p> kita menggunakan tiga font, yaitu Cursive, Halvetica, dan sans-serif. Jadi, Jika di komputer anda tidak ada font Cursive, maka yang digunakan adalah font Halvetica. font ataupun sans-serif.

Menggunakan Font dari Google

Cara mengatur font di CSS yang terakhir adalah menggunakan font dari google. Ada dua cara jika kita ingin menggunakan font dari google yaitu :

1. Mengimpor font-nya dengan tag <link> di HTML

<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">

2. Mengimpor font-nya dengan kata kunci @import di CSS

<style>
    @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
</style>

Contoh :

Untuk lebih jelas, mari kita praktikaan …

1. Silahkan buka font google pada link ini : google font

2. Lalu pilih font yang ingin anda atur, contoh “Pacifico”

3. Setelah itu klik “regular 400” disamping kanan.

4. Maka akan muncul menu pada samping kanan,  anda bebas untuk memilih sebuah tag link ataupun kata kunci @import. Sebagai contoh saya memilih tag <link>.

4. Buatlah file baru dengan nama font-google.html, kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font dari Google</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <style>
        h1 {
            font-family: Arial, Helvetica, sans-serif;
        }
        p {
            font-family: 'Pacifico', cursive;
        }
    </style>
</head>
<body>
    <h1>Font Google</h1>
    <p>Ini adalah contoh teks HTML yang menggunakan font dari Google.</p>
</body>
</html>

Hasilnya :

Mengatur Font di CSS

Sekian untuk tutorial CSS dalam mengatur font pada teks HTML. Silahkan share artikel ini jika bermanfaat. Terimakasih

Yuk bantu share !!!

Tinggalkan Balasan

Scroll to Top