Cara mengganti font di css

Question

Ketika kita membuka sebuah halaman website, tak jarang kita menemukan ukuran dan bentuk huruf atau tulisan dari masing-masing website tersebut.

Table of Contents Show

Table Of Contents
#1 Cara Mengubah Jenis Font
#2 Cara Mengubah Warna Font
#3 Cara Mengubah Ukuran Font
Menarik Kesimpulan
Bagaimana cara mengubah font dari suatu elemen css?
Apa itu font style pada css?
Gimana cara ganti font?
Bagaimana saya menukar font style online?

Lalu, bagaimana hal ini bisa terjadi?

Font adalah jenis huruf yang ada pada sebuah dokumen

Berbagai jenis font dan bisa dipergunakan sesuai dengan desain yang diinginkan tapi memang font yang akan ditampilkan pada web browser sepertinya adalah berasal dari komputer user atau pengunjung web.

Apabila font yang dipilih tersebut tidak standar, maka desain yang telah dirancang serapih mungkin kemungkinan akan kacau dikarenakan font tersebut yang dipilih tadi tidak tersedia.

Pada artikel kali ini saya ingin membahas bagaimana cara mengubah font pada html:

#1 Cara Mengubah Jenis Font

Agar Anda dapat menentukan jenis font dari sebuah teks html maka Anda dapat mempergunakan salah satu dari pada property CSS yaitu font-family. Adapun penulisannya bisa dilihat dari contoh berikut:

<style type="text/css">;
    body { font-family: Arial; }
    p { font-family: Courier, monospace; }
    div { font-family: Duru Sans, Verdana, sans-serif; }
</style>

Seperti yang bisa anda lihat, disana terdapat nilai yang didukung oleh properti family berupa nama-nama font yang diinginkan oleh developer.

Contoh Penggunaan Font-Family

Berikut adalah contoh penggunaan properti font-family dalam CSS:

<!DOCTYPE html>
<html>
<head>
    <title>Mengubah Jenis Font</title>
    <style type="text/css">
        body { font-family: Calibri, Helvetica, Arial, sans-serif; }
        h3 { font-family: Cambria,"Times New Roman",serif; }
        #paragraf2 { font-family: Georgia, serif; }
    </style>
</head>
<body>
    <h3>Belajar</h3>
    <p>
        <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama.
    </p>
    <p id="paragraf2">
        Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda
    </p>
</body>
</html>

Dari kode diatas maka akan menghasilkan halaman program seperti gambar di bawah ini

Penjelasan:

Pada tag body ini terdapat font-family dengan type font Calibri, Helvetica, Arial, sans-serif
Pada tag h3 mempunyai jenis font Cambria,"Times New Roman",serif;

<!DOCTYPE html>
<html>
<head>
    <title>Mengubah Jenis Font</title>
    <style type="text/css">
        body { font-family: Calibri, Helvetica, Arial, sans-serif; }
        h3 { font-family: Cambria,"Times New Roman",serif; }
        #paragraf2 { font-family: Georgia, serif; }
    </style>
</head>
<body>
    <h3>Belajar</h3>
    <p>
        <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama.
    </p>
    <p id="paragraf2">
        Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda
    </p>
</body>
</html>

0 – mengartikan jika id dengan nama

<!DOCTYPE html>
<html>
<head>
    <title>Mengubah Jenis Font</title>
    <style type="text/css">
        body { font-family: Calibri, Helvetica, Arial, sans-serif; }
        h3 { font-family: Cambria,"Times New Roman",serif; }
        #paragraf2 { font-family: Georgia, serif; }
    </style>
</head>
<body>
    <h3>Belajar</h3>
    <p>
        <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama.
    </p>
    <p id="paragraf2">
        Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda
    </p>
</body>
</html>

1 mempunyai pengaturan font-family dengan format Georgia, serif;

#2 Cara Mengubah Warna Font

Untuk mengubah warna kita membutuhkan atribut

<!DOCTYPE html>
<html>
<head>
    <title>Mengubah Jenis Font</title>
    <style type="text/css">
        body { font-family: Calibri, Helvetica, Arial, sans-serif; }
        h3 { font-family: Cambria,"Times New Roman",serif; }
        #paragraf2 { font-family: Georgia, serif; }
    </style>
</head>
<body>
    <h3>Belajar</h3>
    <p>
        <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama.
    </p>
    <p id="paragraf2">
        Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda
    </p>
</body>
</html>

2. Berikut contoh penulisannya:

<style type="text/css">;
    h3 { color: red }
    p { color: blue }
</style>

Pada contoh diatas saya ingin meberikan beberapa warna untuk masing-masing element. Semua text yang berapa didalam tag h3 nantinya akan berwarna merah. Sedangkan semua tulisan yang berada didalam tag

<!DOCTYPE html>
<html>
<head>
    <title>Mengubah Jenis Font</title>
    <style type="text/css">
        body { font-family: Calibri, Helvetica, Arial, sans-serif; }
        h3 { font-family: Cambria,"Times New Roman",serif; }
        #paragraf2 { font-family: Georgia, serif; }
    </style>
</head>
<body>
    <h3>Belajar</h3>
    <p>
        <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama.
    </p>
    <p id="paragraf2">
        Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda
    </p>
</body>
</html>

4 akan berwarna biru.

Silahkan coba kode berikut ini:

<!DOCTYPE html>
<html>
<head>
    <title>Mengubah Warna Font</title>
    <style type="text/css">;
        h3 { color: red }
        p { color: blue }
    </style>
</head>
<body>
    <h3>Contoh Tulisan Warna Merah</h3>
    <p>
        <strong>Contoh Tulisan</strong> Berwarna Biru
    </p>
</body>
</html>

#3 Cara Mengubah Ukuran Font

Sedangkan untuk mengubah ukuran font kita membutuhkan atribut

<!DOCTYPE html>
<html>
<head>
    <title>Mengubah Jenis Font</title>
    <style type="text/css">
        body { font-family: Calibri, Helvetica, Arial, sans-serif; }
        h3 { font-family: Cambria,"Times New Roman",serif; }
        #paragraf2 { font-family: Georgia, serif; }
    </style>
</head>
<body>
    <h3>Belajar</h3>
    <p>
        <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama.
    </p>
    <p id="paragraf2">
        Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda
    </p>
</body>
</html>

5. Berikut contoh penulisannya:

<style type="text/css">;
    h3 { font-size: red }
    p { font-size: blue }
</style>

Pada contoh diatas saya ingin meberikan beberapa warna untuk masing-masing element. Semua text yang berapa didalam tag h3 nantinya akan berwarna merah. Sedangkan semua tulisan yang berada didalam tag

<!DOCTYPE html>
<html>
<head>
    <title>Mengubah Jenis Font</title>
    <style type="text/css">
        body { font-family: Calibri, Helvetica, Arial, sans-serif; }
        h3 { font-family: Cambria,"Times New Roman",serif; }
        #paragraf2 { font-family: Georgia, serif; }
    </style>
</head>
<body>
    <h3>Belajar</h3>
    <p>
        <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama.
    </p>
    <p id="paragraf2">
        Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda
    </p>
</body>
</html>

4 akan berwarna biru.

Silahkan coba kode berikut ini:

<!DOCTYPE html>
<html>
<head>
    <title>Mengubah Warna Font</title>
    <style type="text/css">;
        h3 { font-size: 12px }
        p { font-size: 16px }
    </style>
</head>
<body>
    <h3>Contoh tulisan berukuran 12px</h3>
    <p>
        <strong>Contoh Tulisan</strong> berukuran 16px
    </p>
</body>
</html>

Menarik Kesimpulan

Jadi untuk mengubah warna font kita memerlukan atribut

<!DOCTYPE html>
<html>
<head>
    <title>Mengubah Jenis Font</title>
    <style type="text/css">
        body { font-family: Calibri, Helvetica, Arial, sans-serif; }
        h3 { font-family: Cambria,"Times New Roman",serif; }
        #paragraf2 { font-family: Georgia, serif; }
    </style>
</head>
<body>
    <h3>Belajar</h3>
    <p>
        <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama.
    </p>
    <p id="paragraf2">
        Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda
    </p>
</body>
</html>

2, untuk mengubah jenis font kita memerlukan atribut font-family, sedangkan untuk mengubah ukuran font kita mebutuhkan

<!DOCTYPE html>
<html>
<head>
    <title>Mengubah Jenis Font</title>
    <style type="text/css">
        body { font-family: Calibri, Helvetica, Arial, sans-serif; }
        h3 { font-family: Cambria,"Times New Roman",serif; }
        #paragraf2 { font-family: Georgia, serif; }
    </style>
</head>
<body>
    <h3>Belajar</h3>
    <p>
        <strong>HTML & CSS</strong> Ini adalah contoh text untuk paragram pertama.
    </p>
    <p id="paragraf2">
        Ini adalah contoh paragraf kedua dengan menambagkan font yang berbeda
    </p>
</body>
</html>

5.

Mari kita rangkum kode diatas menjadi contoh sebagai berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Mengubah Warna Font</title>
    <style type="text/css">;
        h3 {
            font-size: 12px;
            color: red;
            font-family: Calibri, Helvetica, Arial, sans-serif;
        }
        p {
            font-size: 16px;
            color: blue;
            font-family: Cambria,"Times New Roman",serif;
        }
    </style>
</head>
<body>
    <h3>Contoh tulisan berukuran 12px berwarna merah menggunakan font calibri</h3>
    <p>
        <strong>Contoh Tulisan</strong> berukuran 16px berwarna biru menggunakan font cambria
    </p>
</body>
</html>

Catatan: dalam artikel ini saya menggunakan internal css untuk mengubah font, sebenarnya anda juga bisa menggunakan external css, maupun inline-css.

(Silahkan Baca: Perbedaan Internal-css, External-css, dan Inline-css)

Demikian adalah ulasan tentang cara mengubah font di html semoga informasi di atas dapat bermanfaat. Jangan lewatkan seri panduan belajar HTML kami.

Bagaimana cara mengubah font dari suatu elemen css?

untuk mengubah atau mengganti font dengan css, teman-teman bisa menggunakan property 'font-family'. dan kemudian pada value nya masukkan nama font yang ingin di gunakan.

Apa itu font style pada css?

Properti font-style digunakan untuk mengatur agar teks miring. Nilai yang valid untuk properti ini adalah: normal – teks normal; italic – teks miring (italic);