author Ahmad Muhardian

Tutorial CSS: Cara Mengatur Font di CSS


Cara Menggunakan font di CSS

Pada tutorial sebelumnya, kita sudah belajar gimana cara mengatur teks dengan CSS seperti mengatur alignment, spacing, transform, dan sebagainya.

Kali ini kita akan membahas tentang properti font- yang juga berfungsi untuk mengatur teks. Lebih tepatnya mengatur font pada teks.

Ada beberapa properti yang akan kita bahas:

  • 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 mulai..

Mengatur Ukuran Font

Untuk mengatur ukuran font, kita bisa menggunakan properti font-size. Properti ini dapat kita beri nilai dengan satuan px (piksel), % (persentase), em, rem, dan lain-lain.

Contoh:

p {
  font-size: 18px;
}

Artinya:

Kita akan mengatur ukuran font untuk semua elemen <p> sebesar 18px.

Secara default ukuran font untuk elemen <p> adalah 16px. Ini bisa kita ubah sesuai selera.

Selain menggunakan angka, ada juga nilai bawaan yang sudah tersedia seperti:

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

Biar lebih jelas, mari kita coba latihan.

Buatlah file HTML baru dengan nama font-size.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>Contoh Font Size</title>
  <style>
    h1 {
      font-size: 24px;
      color: slateblue;
    }
    .font-big {
      font-size: x-large;
    }

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

Setelah itu, buka dengan web browser.

Maka hasilnya:

contoh font size

Pada contoh ini, kita mengatur ukuran font untuk elemen <h1> adalah 24px.Kamu bisa lihat sendiri hasilnya.

Lalu ukuran font pada paragraf pertama adalah large yang artinya lebih besar dari ukuran normal (16px).

Kemudian pada paragraf kedua, kita tidak mengatur ukuran font-nya. Sehingga akan menggunakan ukuran normal, yakni 16px.

Kemudian paragraf terakhir kita beri ukuran font-nya dengan small.

Sangat mudah bukan.

Silahkan coba eksperimen di inspect elemen, ubahlah ukuran font-nya dari sana.

Mengatur Ketebalan Font

Untuk mengatur ketebalan font, kita bisa menggunakan properti font-weight. Properti ini dapat kita berikan nilai berupa angka ukuran ketebalan atau nilai konstan yang sudah ada.

Contoh nilai-nilai yang valid:

  • 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.

Contoh penggunaan:

p {
  font-weight: bold;
}

Artinya:

Kita akan mengatur ketebalan font semua elemen <p> dengan font yang lebih tebal.

Mari kita coba latihan!

Buatlah file HTML baru dengan nama font-weight.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>Contoh Font Weight</title>
    <style>
        h1 {
            font-weight: bold;
        }

        .light {
            font-weight: lighter;
        }

        .bold {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Weight</h1>
    <p class="light">Font Weight berfungsi untuk Menentukan Ketebalan Font</p>
    <p class="bold">Ini adalah contoh paragraf dengan font-weight bold</p>
</body>
</html>

Setelah itu, buka dengan web browser.

Maka hasilnya:

contoh font weight

Pada paragraf pertama, kita mengatur ketebalan font-nya dengan lighter, akan tetapi hasilnya normal.

Mengapa?

Ini karena font yang digunakan tidak memiliki font dengan ketebalan tipis atau lighter.

Coba ganti jenis font-nya, misalnya pakai roboto.

Tambahkan CSS berikut:

body {
	font-family: roboto;
}

Pastikan font roboto sudah terinstal di komputermu.

Maka hasilnya akan seperti ini:

contoh font lighter roboto

Ketebalan font pada paragraf pertama akan lebih tipis, karena font Roboto punya ketebalan lighter.

Mengatur Font Style

Properti font-style digunakan untuk mengatur agar teks miring. Nilai yang valid untuk properti ini adalah:

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

Contoh:

blockquote {
	font-style: italic;
}

Artinya:

Kita akan mengatur semua elemen <blockquote> dengan style font miring.

Biar lebih jelas, mari kita coba latihan.

Buatlah file baru dengan nama font-style.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>Contoh Font Style</title>
    <style>
        blockquote {
            font-style: italic;
            font-size: larger;
            color: dodgerblue;
        }
        cite {
            font-size: small;
            font-style: normal;
            color: fuchsia;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Style</h1>
    <blockquote>
        "Hidup itu sebentar. Kamu harus bisa tersenyum saat merasakan kepedihan atau kita tak akan pernah melanjutkan hidup".
        <cite>~ Jeff Ross</cite>
    </blockquote>
</body>
</html>

Setelah itu, buka dengan web browser.

Maka hasilnya:

contoh font style

Pada contoh ini, kita mengatur font style untuk elemen <blockquote> menjadi italic dan <cite> menjadi normal.

Mengatur Jenis Font

Untuk mengatur jenis font, kita bisa gunakan properti font-family. Properti ini bisa kita isi dengan nama font dan juga nama family dari font.

Secara umum ada lima jenis family font:

  • 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:

<h1 style="font-family: sans-serif">Font Sans</h1>
<h1 style="font-family: serif">Font Serif</h1>
<h1 style="font-family: monospace">Font Monospace</h1>
<h1 style="font-family: cursive">Font Cursive</h1>
<h1 style="font-family: fantasy">Font Fantasy</h1>

Hasilnya:

contoh font family

Font yang dipakai akan menggunakan default font yang dipakai pada sistem.

Selain menggunakan nama family, kita juga bisa menggunakan nama font-nya langsung.

Mari kita coba!

Buatlah file HTML baru dengan nama font-family.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>Contoh Font Family</title>
    <style>
        h1 {
            font-family: Arial, Helvetica, sans-serif;
        }

        p {
            font-family: cursive;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Family</h1>

    <p>Ini adalah contoh paragraf dengan font family cursive.
        Jenis font cursive adalah font yang terlihat seperti
        tulisan tangan. Biasanya digunakan untuk teks yang non-formal,
        seperti teks untuk komik dan cerita.
    </p>
</body>
</html>

Setelah itu, buka dengan browser.

Maka hasilnya:

contoh latihan font family

Coba perhatikan pada kode CSS untuk elemen <h1>.

h1 {
	font-family: Arial, Helvetica, sans-serif;
}

Pada kode CSS ini, kita menggunakan tiga font, yakni Arial, Halvetica, dan sans-serif.

Jika di komputer kita tidak ada font Arial, maka font Halvetica yang akan dipakai. Begitu juga jika tidak ada font Halvetica, maka font sans-serif yang akan dipakai.

Selain menggunakan font yang sudah terinstal di komputer, kita juga bisa menggunakan font yang ada di internet. Contohnya seperti Google Font.

Mari kita pelajari..

Menggunakan Font dari Google

Untuk menggunakan font dari Google Font, kita harus mengimpor font-nya terlebih dahulu dengan tag <link> di HTML atau kata kunci @import di CSS.

Contoh: dengan tag <link> di HTML.

<link href="https://fonts.googleapis.com/css2?family=Caveat:[email protected]&display=swap" rel="stylesheet">

Contoh: dengan kata kunci @import di CSS.

@import url('https://fonts.googleapis.com/css2?family=Caveat:[email protected]&display=swap');

Biar lebih paham, mari kita coba latihan.

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>Contoh Font dari Google</title>
    <style>
        h1 {
            font-family: 'Permanent Marker', cursive;
        }
        
        p {
            font-family: 'Caveat', cursive;
        }
    </style>
</head>
<body>

    <h1>Contoh Font dari Google</h1>
    <p>Ini adalah paragraf yang menggunakan font dari Google.</p>
    
</body>
</html>

Pada contoh ini kita belum mengimpor font dari Google.

Maka tampilannya akan seperti ini:

contoh sebelum import dari google

Font yang digunakan adalah font cursive yang ada di komputer.

Sekarang mari kita coba tambahkan font dari Google.

Silahkan buka font berikut:

Setelah itu, klik Select this style.

select font google

Setelah itu, kita akan mendapatkan kode untuk mengimpor font ke HTML.

kode css untuk import font

Silahkan copy kode tersebut, kemudian taruh di dalam tag <head> kode kita.

Sehingga sekarang kodenya menjadi seperti 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>Contoh 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=Caveat:[email protected]&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
    <style>
        h1 {
            font-family: 'Permanent Marker', cursive;
        }
        
        p {
            font-family: 'Caveat', cursive;
        }
    </style>
</head>
<body>

    <h1>Contoh Font dari Google</h1>
    <p>Ini adalah paragraf yang menggunakan font dari Google.</p>
    
</body>
</html>

Maka hasilnya:

contoh menggunakan font dari google

Mantap, sekarang font yang digunakan adalah font dari Google.

Apa Selanjutnya?

Kita sudah belajar mengatur font dengan properti font, sebenarnya masih ada lagi properti yang belum kita bahas seperti font-kerning, font-pallete, font-synthesis, dan sebagainya.

Yang sudah kita bahas di atas, adalah yang paling sering dipakai. Sisanya silahkan lakukan eksperimen sendiri di inspect element.

properti font di inspect element

Selanjutnya silahkan peljari tentang border di CSS.

Selamat belajar. 🙌

Baca Juga ini

Tutorial CSS: Text Formatting di CSS

Tutorial CSS: Text Formatting di CSS

Pada tutorial ini kita akan belajar tentang properti CSS untuk mengatur teks. Seperti text-align, text-decoration, text-shadow, dan sbagainya.

Tutorial CSS: Menggunakan Background di CSS

Tutorial CSS: Menggunakan Background di CSS

Pada tutorial kita akan belajar tentang properti background di CSS untuk membuat background dengan warna dan gambar.

Tutorial Bootstrap 4 untuk Pemula: Pengenalan BS4 dan Persiapan Project

Tutorial Bootstrap 4 untuk Pemula: Pengenalan BS4 dan Persiapan Project

Pertama kita akan berkenalan dengan Bootstrap 4, lalu mencoba membuat sampel project. Terakhir saya akan membahas tips belajar bootstrap.

Cara Membuat Halaman Github untuk Repositori

Cara Membuat Halaman Github untuk Repositori

Pada tulisan sebelumnya, saya pernah membahas tentang cara membuat halaman Github untuk profil individu dan organisasi. Nah, kali ini kita akan membuat halaman github untuk proyek atau repositori. Jadi sebenarnya, setiap proyek atau respositori di Github itu bisa dijadikan halaman Github (Github Pages). Pastikan di dalam proyek berisi file web statis seperti HTML, CSS, dan Javascript. Membuat repositoriBuatlah repositori dengan nama apa saja, kemudian di dalamnya berisi file web statis. Setelah itu, upload ke github.

Tutorial Web Responsif: Pengenalan RWD dan Viewport

Tutorial Web Responsif: Pengenalan RWD dan Viewport

Bagaimana cara membuat web responsif? itulah pertanyaan yang cukup sering ditanyakan kepada saya. Pertanyaan ini membutuhkan jawaban yang cukup panjang, karena itu saya tidak bisa langsung menjawab secara detail melalui lisan maupun pesan instan, selain itu juga waktu yang tidak mendukung. Berangkat dari keterbatasan itu, akhirnya saya menrebitkan tulisan ini. Apakah itu RWD?RWD singkatan dari Responsive Web Design. Responsif artinya webnya dapat merespon atau menyesuaikan diri dengan perangkat yang digunakan. Misalnya kita membuka webnya melalui ponsel, maka secara otomatis tampilan webnya akan disesuikan dengan ukuran layar ponselnya.

7 Manfaat Inspect Element Bagi Web Developer

7 Manfaat Inspect Element Bagi Web Developer

Inspect Element merupakan fitur browser yang dibuat untuk memudahkan pengembangan web. Inspect Element dapat kita akses dengan klik kanan, kemudian memilih Inspect Element, atau bisa juga dengan menekan tombol F12. Adapun manfaat dari Inspect Element untuk web Developer adalah sebagai berikut. 1. Tempat Eksperimen CSSSelain ada console Javascript, bisa dibilang di Inspect Elemen juga ada console-nya CSS. Ya, di sana kita bisa eksperimen kode CSS. Sebelum kita menulis kode CSS, sebaiknya gunakan Inspect Element terlebih dahulu.

Daftar isi tutorial

  1. Tutorial CSS #01: Pengenalan Dasar CSS untuk Pemula
  2. Tutorial CSS #02: Cara Menulis CSS di HTML
  3. Tutorial CSS #03: Sintaks Dasar CSS yang Harus Kamu Pahami
  4. Tutorial CSS #04: Memahami Selector di CSS
  5. Tutorial CSS #05: Menggunakan Warna di CSS
  6. Tutorial CSS #06: Menggunakan Background di CSS
  7. Tutorial CSS #07: Text Formatting di CSS
  8. Tutorial CSS #08: Menggunakan Font di CSS
  9. Tutorial CSS #09: Menggunakan Garis di CSS (Border) (Coming soon)
  10. Tutorial CSS #10: Menentukan ukuran elemen (Coming soon)
  11. Tutorial CSS #11: Box Model di CSS (Coming soon)
  12. Tutorial CSS #12: Position (Coming soon)
  13. Tutorial CSS #13: Menggunakan Float (Coming soon)
  14. Tutorial CSS3 #xx: Cara Menggunakan Bayangan (Shadow)
  15. 🚧 Work in Progress 🚧

    Maaf jika ada link yang belum aktif. Link tersebut masih dalam draft atau sedang dikerjakan. Do'akan agar penulis tetap sehat dan tulisannya cepat terbit 🙏. Kamu juga bisa memberikan dukungan dengan mentrakteer kopi ☕ supaya penulis kuat begadang, hehe.