3 Menit : Cara Mudah Menambahkan Font ke Website Kamu!

Facebook
Twitter
LinkedIn

Membuat sebuah aplikasi berbasis web, baik berskala kecil maupun besar, kustomisasi style sangatlah penting untuk membuat web dapat dengan mudah digunakan dan merepresentasikan brand tertentu. Salah satu styling yang dapat kita lakukan adalah menambahkan custom font ke website.

Bagaimana tipografi mempengaruhi website?

tipografi
Unsplash

Pemilihan font yang baik dan dilakukan secara efektif dapat mempengaruhi perasaan dari pembaca dan pengaruh terhadap sebuah brand. Jika dipilih dengan baik, penggunaan tipografi dapat menarik konsumen kepada brand tersebut.

Jadi jangan sepelekan tipografi !

Baca Juga – UI Kit – Untuk Desain UI Lebih Cepat

Memasukkan Font ke Website

Ada dua cara untuk memasukkan font ke website yang kamu kerjakan, yaitu melalui <link> dan @import. Kita akan pelajari satu persatu kedua cara tersebut.

Untuk font yang akan kita gunakan, kita akan mengambilnya melalui Google Font, karena mudah digunakan dan gratis 😁. Sebelumnya kita harus pergi ke halaman Google Font, lalu pilih font yang akan kita gunakan. Ada banyak pilihan font yang bagus di Google Font, tapi aku akan pilih satu yaitu Montserrat.

font montserrat
font montserrat

Pilih style yang kamu ingin masukkan ke website – mu. Lalu ikuti langkah dibawah:

Ada <link> tag yang bisa kamu copy ke dalam tag <head> website kamu. Contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Felaboratory</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=Montserrat:ital,wght@0,100;1,100&display=swap" rel="stylesheet">
</head>
<body>
    <p>Custom Font Montserrat !</p>
</body>
</html>
2. Tambahkan style font

Untuk merubah tag <p> tambahkan style berikut:

<style>
        p{
            font-family: 'Montserrat', sans-serif;
        }
    </style>

Melalui @import

Cara ini sebenarnya tidak direkomendasikan karena lebih lambat dibanding menggunakan tag <link>. Namun kamu harus tau caranya!

Untuk font montserrat, linknya adalah https://fonts.googleapis.com/css2?family=Montserrat.

2. Buat tag <style> atau gunakan css eksternal

Buat tag style di file HTML mu atau impor css eksternal.

<style>
</style>
3. Isikan dengan @import

Masukkan @import diikuti dengan url dari font yang akan kamu gunakan. Jangan lupa untuk mendefinisikan font-family pada elemen yang akan kamu ubah fontnya. Contohnya:

<style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat');
        p{
            font-family: 'Montserrat', sans-serif;
        }
    </style>

Kesimpulan

Kita telah menambahkan font Montserrat ke website kita dengan dua cara yang mudah. Tapi cara meggunakan tag <link> lebih direkomendasikan karena tidak akan melakukan blocking terhadap koneksi website kita. Tergantung pilihanmu mau menggunakan yang mana.

Script HTML diatas akan menghasilkan kira – kira seperti ini:

Hasil menambahkan font ke website
Hasil embedding font

Baca Juga:

Muhammad Fajar Estu
Muhammad Fajar Estu
Fajar adalah seorang fullstack programmer yang sekarang bekerja sebagai .NET programmer. Memiliki pengalaman selama 3+ tahun di bidang programming web, mobile, API hingga aplikasi computer vision. Sekarang Fajar menulis artikel tutorial dan berbagi seputar dunia perkuliahan IT.

Tinggalkan Balasan

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