Wednesday, July 10, 2019

Font bagus sekaligus indah untuk website

Hasan Askari: Font bagus sekaligus indah untuk website

Basa-basi

Oke temen-temen, saat ini saya ingin berbagi font yang cocok untuk ditaruh di blog atau website. Sebelum itu, mari kita gali dulu apa kegunaan dari pemasangan font yang bagus. Kegunaannya ialah:

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.


Disqus Codes
  • Untuk menulis teks tebal , sila gunakan atau
  • Untuk menulis teks miring, sila gunakan atau
  • Untuk menulis teks bergaris bawah , sila gunakan
  • Untuk menulis teks bergaris tengah , sila gunakan
  • Untuk menulis kode HTML, silakan pakai atau
    or

    dan gunakan parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Dapatkan Kabar Terbaru Melalui Email