Sunday, June 19, 2016

Mengubah CSS Google Font Ke URL Base64

Google font base64

Untuk menciptakan design blog atau situs menjadi lebih cantik dan menarik kita bisa menggunakan font dari pihak ketiga salah satunya adalah Google Font. Namun penggunaan dan penempatan kode yang kurang tepat justru akan menimbulkan masalah pada kecepatan halaman sebuah blog maupun situs. Salah satu cara meningkatkan pagespeed loading blog atau situs adalah dengan cara mengubah file css eksternal kedalam url base64.

Ada 2 Cara untuk mengubah CSS Google Font menjadi base64 :

# Metode CSS Eksternal


Untuk langkah langkahnya adalah sebagai berikut :

1. Memilih Jenis Font

Silakan kunjungi Google Font untuk memilih jenis font yang ingin kita gunakan nah dari situ kita akan mendapatkan kode Plugin CSS eksternal dan kode CSS properti untuk menyeleksi penggunaannya. Sebagai contoh saya mengambil jenis Font Raleway dan kodenya adalah seperti ini :

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"></link>
dan CSS propertinya :

font-family: 'Raleway', sans-serif;
Pada css ekternal diatas sebenarnya bisa saja langsung kita gunakan dengan menempatkannya pada template HTML,  namun kita akan dihadapkan pada masalah score pagespeed khususnya Google Pagespeed Insight yaitu terkait kritikan Render Blocking CSS. Baca Cara Mengatasi Render Blocking CSS Font Awesome Nah untuk mengatasinya kita bisa mengubah source url font tadi ke dalam url base64.

2. Mengubah CSS Ekternal Font Ke URL Base64

Setelah kita mendapatkan kode css eksternal dari google font tadi langkah selanjutnya adalah mengubah url source ke dalam base64. Silakan perhatikan kode dibawah ini :

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"></link>
Tulisan bercetak tebal diatas adalah kode url dari fontnya

Copy url diatas dan masuk ke http://www.freeformatter.com/base64-encoder.html untuk mengubah url font kedalam base64. Sehingga nati secara keseluruhan kodenya menjadi seperti ini :

<link href="data:text/css;base64,KODE HASIL ENCODE BASE64" rel="stylesheet"></link>
Untuk penempatanya silakan masukkan kode css eksternal yang sudah kita ubah menjadi base64 tadi sebelum kode </head> kemudian seleksi font yang akan ditampilkan pada masing masing css class maupun id dengan menambahkan properti font-family: 'Raleway', sans-serif;

# Metode CSS @Font-face


Jika kita tidak ingin menggunakan CSS eksternal kita bisa juga menambahkan Google font secara langsung pada template dengan mengambil css dari Source URL.

Untuk Langkah Langkahnya Sebagai Berikut :

1. Mengambil Kode CSS dari Source Google Font

Masukkan url source misalnya https://fonts.googleapis.com/css?family=Raleway dan kita ambil kodenya menjadi seperti dibawah ini :

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v11/yQiAaD56cjx1AooMTSghGfY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v11/0dTEPzkLWceF7z0koJaX1A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
2. Mengubah URL Font ke Base64

Pada CSS diatas terdapat 2 url font yang harus kita ubah kedalam base64, untuk cara megubahnya sama pada langkah sebelumnya. Sehingga nanti seluruh kodenya menjadi seperti ini :

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(data:text/css;base64,KODE HASIL ENCODE BASE64) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(data:text/css;base64,KODE HASIL ENCODE BASE64) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
3. Memasang Di Template

Masukkan kode yang telah kita ubah tadi kedalam CSS Template sebelum kode ]]></b:skin> atau </style>

Baca juga Cara Inline Gambar Base64 Di Blogger