Cara Memasang Google Font di Blogger

Cara Memasang Google Font Di Blogger

Pemilihan font (tulisan) dalam sebuah blog atau website sangat berpengaruh besar terhadap perkembangan blog dimata pengunjung. Hal ini disebabkan karena font yang kamu berikan tidak dapat dilihat secara jelas oleh pembaca.

Google font adalah suatu layanan yang disediakan google untuk mendapatkan berbagai font secara gratis yang memudahkan pekerjaan web developer dalam membuat sebuah proyek atau penelitian.
Di blogger sendiri sudah terdapat beberapa font yang disediakan oleh Google Font yang dapat kamu gunakan. Untuk melihat font tersebut, kamu hanya perlu masuk ke menu Tema >> Sesuaikan >> Tingkat Lanjut.

Bila kamu tidak melihat font tersebut pada menu tadi,  maka kamu hanya perlu menambahkannya secara manual dengan mengikuti langkah-langkah berikut :


1. Pemilihan Font

Hal pertama yang harus kamu lakukan adalah masuk ke situs resminya, yang dapat kamu akses pada alamat https://fonts.google.com/

Kemudian, kamu akan menemukan beberapa font dan beberapa opsi seperti : Sentences, Number, Paragraph dan Costum. Pilihlah font yang kamu anggap sesuai dengan blog kamu dan tidak memberatkan blog. Setiap font yang ada terdapat berbagai macam Style dan keunikan masing-masing. Untuk penggunaan biasa, pilihlah regular 400.

Untuk memilih font google, klik logo (+) dipojok kanan atas pada masing-masing jenis font. Jika sudah, maka akan muncul popup secara otomatis pada bagian bawah layar browser. Pada pembahasan kali ini saya memilih jenis font Montserrat


Cara Memasang Google Font Di Blogger

Pada popup tersebut akan muncul dua pilihan yaitu Embed dan Costomize. Lalu klik pada pilihan kedua yaitu Costumize dan centang semua pilihan font tersebut.

Cara Memasang Google Font Di BloggerCara Memasang Google Font Di Blogger

Semakin banyak pemilihan efek font akan berakibat loading semakin lambat, maka centang menurut kamu efek font yang penting-penting saja.
Jika sudah, jangan lupa untuk mengambil kode pada menu sebelumnya (embed) dan simpan pada notepad kode :

link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">

Cara Memasang Google Font Di Blogger

2. Memasukkan Google Font Ke Blog

Langkah selanjutnya adalah memasukkan kode script pada blog, yaitu meletakkan kode (embed) tersebut diatas kode </head> seperti:

<script>
$(document).ready(function(){
  $(".widget h2").wrapInner("<span/>");
    });
</script>

<b:include data='blog' name='google-analytics'/>

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&amp;subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">

</head>


3. Memanggil Kode Google Font

Setelah memasukkan google font ke blog, langkah terakhir yaitu memanggil kode tersebut sesuai dengan CSS popup pada halaman resmi google font tersebut.

Cara Memasang Google Font Di Blogger

Contoh kode pemanggil pada font diatas adalah :

font-family: 'Montserrat', sans-serif;

Kode pemanggil tersebut jika kamu gunakan untuk heading atau judul blog, maka format penulisannya seperti ini :

h1, h2, h3, h4, h5 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 24px;
}

Dan jika kamu ingin menggunakannya, pada setiap bagian blog dapat menggunakan selector body dengan format penulisan seperti berikut :

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 27px;
}


Itulah langkah-langkah mudah dalam memasang serta menggunakan google font di blogger, jika kamu merasa terkandala dengan langkah-langkah diatas jangan segan untuk bertanya pada kolom komentar. Salam..

Berlangganan update artikel terbaru via email :

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel