Cara Menambahkan Font Ke CSS

Assalamualaikum Wr.Wb.

Sahabat Webhozz, gimana kabarnya nih??? Seperti biasa, semoga sehat selalu ya…Amin.

Oke, pada kesempatan kali ini. Kita akan belajar gimana caranya memasukkan font eksternal ke dalam file css.

Seperti biasanya kalo dalam dunia web design, kita memerlukan berbagai macam font untuk mendukung pesan dari tampilan sebuah website.
Dan masing-masing font juga memiliki kesan yang berbeda.

Dalam css ada perintah yang biasanya kita pake yaitu “font-family:nama_font;”.

Akan tetapi, secara default jumlah font yang ada dalam sistem komputernya kita sangatlah terbatas.

Kita perlu tambahan font lagi, supaya web yang kita menjadi lebih menarik dan unik. Bener kan???

Di internet, kita bisa dapatkan font tambahan tersebut dan tinggal download aja. Tinggal cara pasangnya aja.

Oke, langsung aja kita mulai ya.

1. Download dulu font pilihannya. Sebagai contoh, disini kita akan gunakan font Nexa. Untuk link donwloadnya bisa didownload disini https://www.fontfabric.com/nexa-free-font/.

2. Extcract file font hasil downloadnya.

3. Lalu buat folder projectnya. Buat file htmlnya, disini kita kasih nama filenya “index.html”. Lalu ketikkan script HTML pada umumnya.

//===============================================================================================
<!DOCTYPE html>
<html>
<head>
    <title>Teks Eksternal</title>
</head>
<body>
    
    <h2>Teks Eksternal</h2>
    <p>Memasukkan teks eksternal ke dalam CSS</p>

</body>
</html>
//===============================================================================================

4. Masukkan folder font tadi ke dalam folder project kita.

5. Tambahkan script css untuk memberikan font tambahan, seperti di bawah ini pada tag .

//===============================================================================================
<style>
  @font-face /*perintah untuk memanggil font eksternal*/
  {
    font-family: 'Nexa'; /*memberikan nama bebas untuk font*/
    src: url('nexa/Nexa Bold.otf');/*memanggil file font eksternalnya di folder nexa*/
  }

  h2
  {
    font-family: 'Nexa';
  }
</style>
//=============================================================================================== 

6. Maka seperti inilah kode secara keseluruhan.

//===============================================================================================
<!DOCTYPE html>
<html>
<head>
    <title>Teks Eksternal</title>
    <style>
        @font-face /*perintah untuk memanggil font eksternal*/
        {
            font-family: 'Nexa'; /*memberikan nama bebas untuk font*/
            src: url('nexa/Nexa Bold.otf');/*memanggil file font eksternalnya di folder nexa*/
        }

        h2
        {
            font-family: 'Nexa'; /*nama yang sudah didefinisikan pada @font-face*/
        }
    </style>
</head>
<body>
    
    <h2>Teks Eksternal</h2>
    <p>Memasukkan teks eksternal ke dalam CSS</p>

</body>
</html>
//===============================================================================================

7. Maka seperti inilah tampilan akhirnya.

Nah…seperti itulah caranya. MUdah kan???

Semoga bermanfaat ya, amin.

Wassalamualaikum Wr.Wb.