Cara Mengganti dan Menggunakan Font Pada Template Blog

Sebelumnya saya sudah share font untuk template flat dari Google Fonts yang bisa di gunakan ada template blog atau web sobat. Sekarang bagaimana cara mengganti font lama dengan font yang baru? Sebenarnya caranya cukup mudah, cukup simak tutorial berikut ini.

Silahkan lihat font yang dapat sobat gunakan pada artikel, Daftar Font Yang Cocok Untuk Template Blog.

Cara Mengganti Font Pada Blog

1. Pastikan sobat sudah memiliki kode CSS font baru yang ingin digunakan untuk mengganti font lama. Pada postingan ini, saya akan menggunakan font Open Sans untuk ditempatkan pada blog.

Sebelum memulai, silahkan buka menu Template lalu klik Edit HTML. Cari font lama pada template blog sobat bila tidak ingin digunakan lagi. Bila memasang font baru dan font lama belum dihapus, dapat membuat loading blog lebih berat walau hanya sedikit. Gunakan Ctlr + F dan cari kode CSS font lama sobat.

Tampilan kodenya hampir sama dengan CSS Font yang akan kita gunakan, beda nama font nya saja. Bila tidak menemukannya maka skip saja penghapusan font lama. Karena bisa jadi blog sobat cuma menggunakan font bawaan blogger seperti Arial dll.

2. Silahkan letakkan CSS Font Open Sans berikut sebelum atau diatas kode </head>.

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

3. Klik Save dan Font Open Sans telah terpasang. Setelah itu, lanjutkan ke cara menggunakan font yang telah sobat pasang.

Cara Menggunakan/Mengaktifkan Font Pada Template Blog

1. Cara kode font-family pada template sobat menggunakan Ctrl + F.

2. Sobat mungkin akan menemukan tampilan CSS seperti berikut.

font-family:'Arial';font-size:15px;color:#000;

Arial adalah nama font lama sobat, silahkan ganti dengan Open Sans sehingga menjadi seperti ini.

font-family:'Open Sans';font-size:15px;color:#000;

3. Lakukan hal tersebut pada semua kode font-family yang ingin sobat rubah lalu klik save.

Perhatian
Sebagai tambahan, bila CSS font-family berada dalam tag ]]></b:skin> atau mudahnya kode tersebut berwarna biru, silahkan terapkan cara di atas. Namun, apa bila CSS font-family berada dalam tag </style> atau mudahnya selain warna biru, maka ubahlah tanda ' menjadi ' sehingga hasilnya seperti ini.

font-family:&#39;Open Sans&#39;;font-size:15px;color:#000;

Nah, seperti itulah cara mengganti font lama dengan yang baru serta cara menggunakan font nya. Bila masih ada kendala atau ada yang belum dimengerti, silahkan berkomentar.

Saya rasa sekian artikel tentang Cara Mengganti dan Menggunakan Font Pada Template Blog. Semoga bisa bermanfaat bagi sobat dan jangan lupa untuk berkomentar sebelum menerapkannya. Terima kasih telah mengunjungi Opick Weblog.

Bila ingin copas silahkan lapor & cantumkan link berikut.
Source : https://wajahilmu.blogspot.com/2015/09/cara-mengganti-font-pada-blog.html

16 komentar

Tuliskan komentar

Unknown

author

12 Sept 2015, 16:12:00 delete

Owh begitu toh .
Makasih gan atas infonya, :)

Balas

12 Sept 2015, 16:34:00 delete

bagus nih misalnya kita bosan dengan font yang biasa .. bisa diganti

12 Sept 2015, 16:39:00 delete

wah, yg ini ni empuk bener nih..
palut d coba N d pelajari dlu..
ijin bookmarknya gan :D

Erenka

12 Sept 2015, 16:41:00 delete

ternyata caranya mudah :D thanks gan :D

12 Sept 2015, 20:08:00 delete

thanks gan infonya soalnya saya kadang suka bingung dengan hal seperti ini

Anonymous

12 Sept 2015, 21:34:00 delete

bermanfaat buat saya yang masih newbie. nice

13 Sept 2015, 00:26:00 delete

Gan? apa benar font berpengaruh terhadap SEO, soal nya banyak yang nyaranin pake ARIAL,
tapi sebenar nya nggak terlalu suka ama font arial,,, terlalu classic soalnya

Master Mind

13 Sept 2015, 01:08:00 delete

Font admin pake raleway bukan nh? Enak dliat gan

Muhammad taufiq nur

13 Sept 2015, 14:48:00 delete

iya gan, ane seneng nih font

Twin88

14 Sept 2015, 03:52:00 delete This comment has been removed by a blog administrator.

14 Sept 2015, 17:20:00 delete

wih bagus nih misalnya kita bosan dengan font yang biasa bisa diganti

motivasiharini

14 Sept 2015, 20:25:00 delete

bermanfaat gan...nice....

Jefry Dewangga

10 Oct 2015, 23:28:00 delete

Tambahan, Google Fonts (https://www.google.com/fonts) menyediakan berbagai macam jenis font open source yang dapat digunakan secara gratis.

Daripada menggunakan kode seperti di bawah ini,
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Akan lebih baik jika membuka tautan https://fonts.googleapis.com/css?family=Open+Sans lalu mengcopy kode yang muncul dan memapastekannya ke dalam kode CSS. Menurut pengalaman saya, menggunakan cara seperti ini akan mempercepat dns lookup sehingga dapat memercepat loading blog walau hanya sepersekian detik.

10 Oct 2015, 23:31:00 delete

Font berpengaruh terhadap readablity (keterbacaan) suatu artikel, jika keterbacaannya kurang dapat menyebabkan pengunjung malas untuk melanjutkan membaca. Dampaknya mungkin tab halaman blog akan langsung di tutup dan meningkatkan bounce rate.

29 Jun 2016, 14:03:00 delete

izin copas bang.. :)
makasih (y)

SEKODE

8 Feb 2019, 21:48:00 delete

thanks tutornya gan.. saya udah bosen pake font bawaan template

✖ Komentar dengan isi Link Aktif, Promosi, atau mengandung unsur Sara akan dihapus.
✔ Bila ingin riquest, bertanya, atau sekedar say hi aja, silahkan ke halaman OOT
✔ Untuk menyisipkan kode, silahkan parse lalu copy dan paste hasil parse ke kolom komentar.

EmoticonEmoticon OOT

Cara Mengganti dan Menggunakan Font Pada Template Blog

Cara Mengganti Font Pada Blog

Cara Menggunakan/Mengaktifkan Font Pada Template Blog

Share this :

16 komentar