Rekomendasi Font untuk Website

Font bagus untuk website
rekomendasi font untuk website

Dalam membangun sebuah website, font menjadi elemen penting yang tidak bisa diabaikan, sebab  berkaitan dengan kenyamanan para pengunjung. Pengembang website harus bisa menyesuaikan kebutuhan font dalam sebuah website. Sebagai contoh jika website berisi tentang cerita anak maka font yang dipasang pun sebaiknya tidak terlalu kaku. Berbeda lagi jika website yang dibangun berfokus pada niche teknologi, maka font yang tegas merupakan pilihan yang tepat.

Pada kali ini saya ingin merekomendasikan kepada teman-teman font apa yang cocok digunakan dalam sebuah website atau blog. Tapi sebelumnya mari kita pahami dulu apa fungsi sebuah font:

1. Memudahkan pembacaan

Di era ini, manusia semakin pinter. Pinter masak, pinter main, pinter ngomong, pinter juga menulis. Sehingga tulisan banyak sudah menjadi hal yang lumrah. Misalnya sampai 3000-5000 kata. Bagi saya, itu ... sangat luar biasa sekali. Tapi dengan tulisan segitu, terkadang yang membaca belum tentu banyak. Nah, untuk mengimbanginya sebaiknya blogger harus jago mencari font. Supaya apa? Supaya pembaca tidak mudah jenuh. Dengan font yang indah, maka tulisan pun jadi mudah dibaca.

2. Membuat betah para pengunjung

Tentang ini, sudah pasti. Terlebih jika tulisannya berbobot. Para pembaca akan semakin betah dan bisa jadi enggan untuk beralih ke situs lain.

3. Menambahkan nilai keindahan blog
Bagi yang suka seni, tentu akan melihat apapun dengan kacamata seniman. Tak terkecuali font. Dengan font yang apik, maka blog anda punya nilai tambah tersendiri.

Baiklah, mari kita cari tau: mana sih font yang bagus dan indah? Berikut font-font bagus dan indah menurut saya:

Abeezee

Angka: 1 2 3 4 5 6 7 8 9

Simbol: @ # $ % & * - + ( ) ! " ' “ ” ˝ ‘ ’ ` : ; / ? . ~ | • √ π ÷ × { } № £ ¢ € ° ^ _ = [ ] ™ ® © ¶ \ ≠ ≈ ∞ ♪ ♥ ♠ ♦ ♣ § ≤ < « ‹ › » > ≥

huruf kapital: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

huruf kecil : a b c d e f g h i j k l m n o p q r s t u v w x y z

Kalimat:
Catat
Hasan Askari


Manusia itu sering lupa
Maka bila ide menyapa
Segera catat! Wujudnya apa

(Lampung, 11 Juni 2019)


Armata

Angka: 1 2 3 4 5 6 7 8 9

Simbol: @ # $ % & * - + ( ) ! " ' “ ” ˝ ‘ ’ ` : ; / ? . ~ | • √ π ÷ × { } № £ ¢ € ° ^ _ = [ ] ™ ® © ¶ \ ≠ ≈ ∞ ♪ ♥ ♠ ♦ ♣ § ≤ < « ‹ › » > ≥

huruf kapital: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

huruf kecil : a b c d e f g h i j k l m n o p q r s t u v w x y z

Kalimat:
Catat
Hasan Askari


Manusia itu sering lupa
Maka bila ide menyapa
Segera catat! Wujudnya apa

(Lampung, 11 Juni 2019)


Cairo

Angka: 1 2 3 4 5 6 7 8 9

Simbol: @ # $ % & * - + ( ) ! " ' “ ” ˝ ‘ ’ ` : ; / ? . ~ | • √ π ÷ × { } № £ ¢ € ° ^ _ = [ ] ™ ® © ¶ \ ≠ ≈ ∞ ♪ ♥ ♠ ♦ ♣ § ≤ < « ‹ › » > ≥

huruf kapital: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

huruf kecil : a b c d e f g h i j k l m n o p q r s t u v w x y z

Kalimat:
Catat
Hasan Askari


Manusia itu sering lupa
Maka bila ide menyapa
Segera catat! Wujudnya apa

(Lampung, 11 Juni 2019)


Didact Gothic

Angka: 1 2 3 4 5 6 7 8 9

Simbol: @ # $ % & * - + ( ) ! " ' “ ” ˝ ‘ ’ ` : ; / ? . ~ | • √ π ÷ × { } № £ ¢ € ° ^ _ = [ ] ™ ® © ¶ \ ≠ ≈ ∞ ♪ ♥ ♠ ♦ ♣ § ≤ < « ‹ › » > ≥

huruf kapital: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

huruf kecil : a b c d e f g h i j k l m n o p q r s t u v w x y z

Kalimat:
Catat
Hasan Askari


Manusia itu sering lupa
Maka bila ide menyapa
Segera catat! Wujudnya apa

(Lampung, 11 Juni 2019)


Exo

Angka: 1 2 3 4 5 6 7 8 9

Simbol: @ # $ % & * - + ( ) ! " ' “ ” ˝ ‘ ’ ` : ; / ? . ~ | • √ π ÷ × { } № £ ¢ € ° ^ _ = [ ] ™ ® © ¶ \ ≠ ≈ ∞ ♪ ♥ ♠ ♦ ♣ § ≤ < « ‹ › » > ≥

huruf kapital: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

huruf kecil : a b c d e f g h i j k l m n o p q r s t u v w x y z

Kalimat:
Catat
Hasan Askari


Manusia itu sering lupa
Maka bila ide menyapa
Segera catat! Wujudnya apa

(Lampung, 11 Juni 2019)


K2D

Angka: 1 2 3 4 5 6 7 8 9

Simbol: @ # $ % & * - + ( ) ! " ' “ ” ˝ ‘ ’ ` : ; / ? . ~ | • √ π ÷ × { } № £ ¢ € ° ^ _ = [ ] ™ ® © ¶ \ ≠ ≈ ∞ ♪ ♥ ♠ ♦ ♣ § ≤ < « ‹ › » > ≥

huruf kapital: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

huruf kecil : a b c d e f g h i j k l m n o p q r s t u v w x y z

Kalimat:
Catat
Hasan Askari


Manusia itu sering lupa
Maka bila ide menyapa
Segera catat! Wujudnya apa

(Lampung, 11 Juni 2019)


Mali

Angka: 1 2 3 4 5 6 7 8 9

Simbol: @ # $ % & * - + ( ) ! " ' “ ” ˝ ‘ ’ ` : ; / ? . ~ | • √ π ÷ × { } № £ ¢ € ° ^ _ = [ ] ™ ® © ¶ \ ≠ ≈ ∞ ♪ ♥ ♠ ♦ ♣ § ≤ < « ‹ › » > ≥

huruf kapital: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

huruf kecil : a b c d e f g h i j k l m n o p q r s t u v w x y z

Kalimat:
Catat
Hasan Askari


Manusia itu sering lupa
Maka bila ide menyapa
Segera catat! Wujudnya apa

(Lampung, 11 Juni 2019)


Monda

Angka: 1 2 3 4 5 6 7 8 9

Simbol: @ # $ % & * - + ( ) ! " ' “ ” ˝ ‘ ’ ` : ; / ? . ~ | • √ π ÷ × { } № £ ¢ € ° ^ _ = [ ] ™ ® © ¶ \ ≠ ≈ ∞ ♪ ♥ ♠ ♦ ♣ § ≤ < « ‹ › » > ≥

huruf kapital: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

huruf kecil : a b c d e f g h i j k l m n o p q r s t u v w x y z

Kalimat:
Catat
Hasan Askari


Manusia itu sering lupa
Maka bila ide menyapa
Segera catat! Wujudnya apa

(Lampung, 11 Juni 2019)


Montserrat Alternates

Angka: 1 2 3 4 5 6 7 8 9

Simbol: @ # $ % & * - + ( ) ! " ' “ ” ˝ ‘ ’ ` : ; / ? . ~ | • √ π ÷ × { } № £ ¢ € ° ^ _ = [ ] ™ ® © ¶ \ ≠ ≈ ∞ ♪ ♥ ♠ ♦ ♣ § ≤ < « ‹ › » > ≥

huruf kapital: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

huruf kecil : a b c d e f g h i j k l m n o p q r s t u v w x y z

Kalimat:
Catat
Hasan Askari


Manusia itu sering lupa
Maka bila ide menyapa
Segera catat! Wujudnya apa

(Lampung, 11 Juni 2019)


Play

Angka: 1 2 3 4 5 6 7 8 9

Simbol: @ # $ % & * - + ( ) ! " ' “ ” ˝ ‘ ’ ` : ; / ? . ~ | • √ π ÷ × { } № £ ¢ € ° ^ _ = [ ] ™ ® © ¶ \ ≠ ≈ ∞ ♪ ♥ ♠ ♦ ♣ § ≤ < « ‹ › » > ≥

huruf kapital: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

huruf kecil : a b c d e f g h i j k l m n o p q r s t u v w x y z

Kalimat:
Catat
Hasan Askari


Manusia itu sering lupa
Maka bila ide menyapa
Segera catat! Wujudnya apa

(Lampung, 11 Juni 2019)


Poppins

Angka: 1 2 3 4 5 6 7 8 9

Simbol: @ # $ % & * - + ( ) ! " ' “ ” ˝ ‘ ’ ` : ; / ? . ~ | • √ π ÷ × { } № £ ¢ € ° ^ _ = [ ] ™ ® © ¶ \ ≠ ≈ ∞ ♪ ♥ ♠ ♦ ♣ § ≤ < « ‹ › » > ≥

huruf kapital: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

huruf kecil : a b c d e f g h i j k l m n o p q r s t u v w x y z

Kalimat:
Catat
Hasan Askari


Manusia itu sering lupa
Maka bila ide menyapa
Segera catat! Wujudnya apa

(Lampung, 11 Juni 2019)


Quicksand

Angka: 1 2 3 4 5 6 7 8 9

Simbol: @ # $ % & * - + ( ) ! " ' “ ” ˝ ‘ ’ ` : ; / ? . ~ | • √ π ÷ × { } № £ ¢ € ° ^ _ = [ ] ™ ® © ¶ \ ≠ ≈ ∞ ♪ ♥ ♠ ♦ ♣ § ≤ < « ‹ › » > ≥

huruf kapital: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

huruf kecil : a b c d e f g h i j k l m n o p q r s t u v w x y z

Kalimat:
Catat
Hasan Askari


Manusia itu sering lupa
Maka bila ide menyapa
Segera catat! Wujudnya apa

(Lampung, 11 Juni 2019)


Ruda

Angka: 1 2 3 4 5 6 7 8 9

Simbol: @ # $ % & * - + ( ) ! " ' “ ” ˝ ‘ ’ ` : ; / ? . ~ | • √ π ÷ × { } № £ ¢ € ° ^ _ = [ ] ™ ® © ¶ \ ≠ ≈ ∞ ♪ ♥ ♠ ♦ ♣ § ≤ < « ‹ › » > ≥

huruf kapital: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

huruf kecil : a b c d e f g h i j k l m n o p q r s t u v w x y z

Kalimat:
Catat
Hasan Askari


Manusia itu sering lupa
Maka bila ide menyapa
Segera catat! Wujudnya apa

(Lampung, 11 Juni 2019)


Saira

Angka: 1 2 3 4 5 6 7 8 9

Simbol: @ # $ % & * - + ( ) ! " ' “ ” ˝ ‘ ’ ` : ; / ? . ~ | • √ π ÷ × { } № £ ¢ € ° ^ _ = [ ] ™ ® © ¶ \ ≠ ≈ ∞ ♪ ♥ ♠ ♦ ♣ § ≤ < « ‹ › » > ≥

huruf kapital: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

huruf kecil : a b c d e f g h i j k l m n o p q r s t u v w x y z

Kalimat:
Catat
Hasan Askari


Manusia itu sering lupa
Maka bila ide menyapa
Segera catat! Wujudnya apa

(Lampung, 11 Juni 2019)


Sawarabi Mincho

Angka: 1 2 3 4 5 6 7 8 9

Simbol: @ # $ % & * - + ( ) ! " ' “ ” ˝ ‘ ’ ` : ; / ? . ~ | • √ π ÷ × { } № £ ¢ € ° ^ _ = [ ] ™ ® © ¶ \ ≠ ≈ ∞ ♪ ♥ ♠ ♦ ♣ § ≤ < « ‹ › » > ≥

huruf kapital: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

huruf kecil : a b c d e f g h i j k l m n o p q r s t u v w x y z

Kalimat:
Catat
Hasan Askari


Manusia itu sering lupa
Maka bila ide menyapa
Segera catat! Wujudnya apa

(Lampung, 11 Juni 2019)


Sniglet

Angka: 1 2 3 4 5 6 7 8 9

Simbol: @ # $ % & * - + ( ) ! " ' “ ” ˝ ‘ ’ ` : ; / ? . ~ | • √ π ÷ × { } № £ ¢ € ° ^ _ = [ ] ™ ® © ¶ \ ≠ ≈ ∞ ♪ ♥ ♠ ♦ ♣ § ≤ < « ‹ › » > ≥

huruf kapital: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

huruf kecil : a b c d e f g h i j k l m n o p q r s t u v w x y z

Kalimat:
Catat
Hasan Askari


Manusia itu sering lupa
Maka bila ide menyapa
Segera catat! Wujudnya apa

(Lampung, 11 Juni 2019)


Ubuntu

Angka: 1 2 3 4 5 6 7 8 9

Simbol: @ # $ % & * - + ( ) ! " ' “ ” ˝ ‘ ’ ` : ; / ? . ~ | • √ π ÷ × { } № £ ¢ € ° ^ _ = [ ] ™ ® © ¶ \ ≠ ≈ ∞ ♪ ♥ ♠ ♦ ♣ § ≤ < « ‹ › » > ≥

huruf kapital: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

huruf kecil : a b c d e f g h i j k l m n o p q r s t u v w x y z

Kalimat:
Catat
Hasan Askari


Manusia itu sering lupa
Maka bila ide menyapa
Segera catat! Wujudnya apa

(Lampung, 11 Juni 2019)


Varela Round

Angka: 1 2 3 4 5 6 7 8 9

Simbol: @ # $ % & * - + ( ) ! " ' “ ” ˝ ‘ ’ ` : ; / ? . ~ | • √ π ÷ × { } № £ ¢ € ° ^ _ = [ ] ™ ® © ¶ \ ≠ ≈ ∞ ♪ ♥ ♠ ♦ ♣ § ≤ < « ‹ › » > ≥

huruf kapital: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

huruf kecil : a b c d e f g h i j k l m n o p q r s t u v w x y z

Kalimat:
Catat
Hasan Askari


Manusia itu sering lupa
Maka bila ide menyapa
Segera catat! Wujudnya apa

(Lampung, 11 Juni 2019)

Cara menggunakan

Perlu diketahui bahwa font-font di atas saya ambil dari google fonts. Nah, untuk mencari font lainnya silakan kunjungi link berikut:

Adapun untuk penggunaannya, silakan ikuti langkah berikut:
1. Masukkan kode di bawah ini 

<link href="https://fonts.googleapis.com/css?family=Nama+Font&display=swap" rel="stylesheet">
Tepat di bawah kode <head> atau kode </head>. Ganti kata Nama+Font dengan nama font yang ingin kita pasang.

Ingat ya, Penulisan nama font harus diawali huruf kapital. Selain itu ialah:

  • Pemisah antar font menggunakan tanda |
  • Untuk memisahkan font yang punya nama lebih dari satu, harus menggunakan tanda plus ( + )
  • Diperbolehkan memberikan enter setelah tanda | .Fungsinya untuk mempermudah pembacaan apabila font yang diinputkan banyak.

Contoh:


<link href="https://fonts.googleapis.com/css?family=ABeeZee|
Armata|
Mali|Monda|
Muli|Poppins|Quicksand|Ubuntu|Varela+Round|Didact+Gothic|Merienda|Ruda|K2D|
Montserrat+Alternates|
Saira|
Sawarabi+Mincho|Cairo|Exo|Play|
Righteous&display=swap" rel="stylesheet">

2. Masukkan kode berikut
html,body,.post-body{
font-family: Nama Font;
}
Di antara kode:

<b:skin><![CDATA[  ... ]></b:skin>

Atau di antara kode

<style> ... </style>

Penutup

Setelah melakukan langkah tersebut apakah sesuai hasilnya? Jika tidak, maka ada dua kemungkinan:
1. Penulisan kode <link> yang salah. Termasuk nama font yang dimasukkan.

2. Penulisan kode css yang salah.


Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.