Link Font Di Head Blog Error Validasi HTML5

Akhir-akhir ini ada beberapa sahabat Creator™ yang menanyakan link font yang disimpan di head blog error pada validasi HTML5. Padahal saya sendiri untuk link font ini tidak masalah untuk disimpan di head blog.

Link font ini terdetek bad value dengan ilegal karakter dalan query yang bukan sebagai kode sebuah url atau link. Link font yang error ini biasanya link font yang menyertakan beberapa jenis font di dalam link font tersebut.

Sebagai contoh, biasanya link font yang menyebabkan error ini tampak seperti di bawah ini.

<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700|Ropa+Sans|Oswald' rel='stylesheet' type='text/css'/>

Pada kode di atas tampak beberapa jenis font di dalam link tersebut dengan menyertakan beberapa jenis ketebalan font. Agar menjadi tidak error pada validasi HTML5, maka kita harus memisahkan font-font tersebut menjadi masing-masing satu link untuk setiap font-nya. Untuk contoh di atas, jika kita pisahkan maka akan menghasilkan 3 link font seperti di bawah ini.

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'/>

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

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Dan untuk ketebalan/weight font (300, 400, 500, 700) serta italic pada font, kita tidak perlu menyertakannya di dalam link font tersebut. Secara normal weight font akan memiliki ketebalan/weight 400, untuk memberikan ketebalan pada font, kita bisa menambahkannya pada kode CSS dengan menambahkan kode font weight misalnya font-weight:700.

Namun saya lebih menyarankan lagi untuk tidak menyimpan link font di head, namun menyimpannya sebagai CSS-nya langsung di skin blog. Sehingga ini akan mengatasi masalah Render-Blocking CSS dari link tersebut yang dapat mengganggu loading blog. Untuk mendapatkan CSS font-nya, kita tinggal copy link fontnya kemudian paste di address bar browser dan klik enter. Nah kita tinggal meng-copy kode CSS-nya di skin atau simpan di paling atas kode CSS template.

Saya contohkan, misalnya untuk kode CSS font Roboto maka CSS akan seperti di bawah ini.

@font-face {

  font-family: 'Roboto';

  font-style: normal;

  font-weight: 400;

  src: local('Roboto Regular'), local('Roboto-Regular'), url(http://themes.googleusercontent.com/static/fonts/roboto/v10/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');

}

Nah silahkan simpan di paling atas kode CSS template, sehingga akan menjadi seperti di bawah ini.

<b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template Style

Name    : -

Author  : -

Url     : -

Updated by: Blogger Team

----------------------------------------------- */



@font-face {

  font-family: 'Roboto';

  font-style: normal;

  font-weight: 400;

  src: local('Roboto Regular'), local('Roboto-Regular'), url(http://themes.googleusercontent.com/static/fonts/roboto/v10/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');

}



body{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoLz9JajImWH6JjDffUy-3-PeKX_bkQrZXnAtVskiHstZn1K2unT5VhNcTASR84131RP4aYPsO6S76gWMks6bRWxpDTioVLc__T5oiujAx_9MPLiO7usHQ-DWG_YEWfcZ-tHF_HdIvioZX/s1600/body-bg.jpg);color:$textcolor;font:12px Arial;text-align:left;margin:0;margin-top:39px;}

a:link{color:$linkcolor;text-decoration:none}

a:visited{color:$visitedlinkcolor;text-decoration:none}

a:hover{color:#000000;text-decoration:none;}

a img{border-width:0}

#header-wrapper{width:950px;height:75px;border:0 solid $bordercolor;margin:0 auto}

#header-inner{background-position:center;margin-left:auto;margin-right:auto}

..................

..................

..................

]]></b:skin>

Selamat mencoba...