Link Font Di Head Blog Error Validasi Html5

Akhir-akhir ini ada beberapa sahabat Kompi yang menanyakan link font yang disimpan di head blog error pada validasi HTML5. Padahal aku sendiri untuk link font ini tidak duduk perkara untuk disimpan di head blog.

Link font ini terdetek bad value dengan ilegal abjad dalan query yang bukan sebagai aba-aba 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 menimbulkan error ini tampak menyerupai 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 aba-aba 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 teladan di atas, kalau kita pisahkan maka akan menghasilkan 3 link font menyerupai 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 mempunyai ketebalan/weight 400, untuk menawarkan ketebalan pada font, kita sanggup menambahkannya pada aba-aba CSS dengan menambahkan aba-aba font weight contohnya font-weight:700.

Namun aku lebih menyarankan lagi untuk tidak menyimpan link font di head, namun menyimpannya sebagai CSS-nya pribadi di skin blog. Sehingga ini akan mengatasi duduk perkara Render-Blocking CSS dari link tersebut yang sanggup mengganggu loading blog. Untuk mendapat CSS font-nya, kita tinggal copy link fontnya lalu paste di address kafetaria browser dan klik enter. Nah kita tinggal meng-copy aba-aba CSS-nya di skin atau simpan di paling atas aba-aba CSS template.

Saya contohkan, contohnya untuk aba-aba CSS font Roboto maka CSS akan menyerupai 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 aba-aba CSS template, sehingga akan menjadi menyerupai 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/AVvXsEhOyn2JQBKP5gJCQamqFAJVOLG9iVDRQpEe2wIccR1J22ThzNHAg0rr2HuFsEXCJps7bgdeL-IduC2nsLewazUoPTYKY-UslFMeNlmfTcnCCLfm-w-spm4gA4NYoRd0lDeo5ib5Z8JKRagd/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...

Sumber https://www.kompiajaib.com/

Share this post