Link Font Di Head Blog Error Validasi HTML5

Link Font Di Head Blog Error Validasi HTML5

Bola Hero Gawai

Link Font Di Head Blog Error Validasi HTML5

Link Font Di Head Blog
Akhir-akhir ini ada beberapa sahabat Kompi 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(http://4.bp.blogspot.com/-CGwCv12DBG8/T8F9vBugAkI/AAAAAAAABUc/CC-GU64e9TY/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...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

68 Comments Add Comment

Keterangan yang sangat mendasar buat saya Kang Adhy
Tentang pengertian pada link font di head blog, makasih :-bd

Balas

Saya lebih suka dengan link font yang standar saja Kang Adhy
Contoh nya pada template Kompi males, itu karena lebih nyaman :)

Balas

kebanyakan saya jumpai di template mas kolis gan

Balas

Iya kang untuk Kompi Males Dan Kompi Banget saya sudah tidak menggunakan link font melainkan menggunakan CSS font sehingga terhindar dari Render-Blocking CSS.

Balas

Iya soalnya waktu itu validasi HTML5 belum begitu populer hehhehe...

Balas

Kebeneran saya juga mengalaminya Mas Adhy, lngsung dipake nich sarannya...

Balas

Alhamdulillah sekarang sudah rebes Kang. Kayaknya baru W3 lagi update HTML5, soalnya beberapa hari ke belakang gk ada masalah loh. Bahkan unik saya cek di BKI url font nya kan nyatu gitu gk error, tapi pas bagian Saya malah error. :D

Lalu saya cek lagi BKI sekarang banyak yang error di blognya. :D

Terima kasih Kang atas penjelasannya, jadi sekarang nambah lagi pengetahuan saya tentang HTML 5. :-d

Balas

Silahkan mas mudah-mudahan bisa dimengerti :)

Balas

Iya mas memang baru-baru ini terjadinya :)
Iya BKI sekarang banyak errornya, mungkin KI blm sempet ngecek karena lagi offline :)

Balas

beberapa hari ke belakang juga Saya sempat memisahkan varian tersebut seperti diatas malah masih error Kang. Kalau gak salah kemarin Saya coba ganti dengan memisahkan font seperti itu malah lolos validasi HTML5. Sempet bikin Saya kesal masalah ini haha

Balas

Sepertinya jika melihat font yang kang Mousir gunakan, untuk memisahkan link font-nya jangan hanya berdasarkan jenis font tpi juga berdasarkan style dan weight-nya ya kang. Namun dengan demikian akan menciptakan link font yang lebih banyak dan ini kurang bagus karena semakin menambah masalah render-blocking css. Jadi saya pikir lebih aman menggunakan CSS font-nya saja sesuai dengan jenis, style, dan weight font-nya, begitu kan kang? :)

Balas

wah setelah dicek bener juga kang. Ada errornya. Tapi setelah liat post ini jadi gak error lagi

Balas

kunjungan rutin mas,sambil menyimak aja soalnya kepala udah pusing duluan ketika mengoprek html,bisa-bisa jadi botak nih

Balas

Kang Adhy beart setiap link sy dapatkan di addres bar laly copy paste ke CSS?

Balas

kalo botak masih mendingan, tuh.. liat mas adhy sampai pake kaca mata wkwkwkwwkwk..... @@,

Balas

sebetulnya jangan simpan diatas <head> tapi simpan pas dibawah meta tag, saya simpan di bawah meta tag gak ada error kok :)

Balas

nih lihat linknya
http://validator.w3.org/check?uri=http%3A%2F%2Ftutornesia.blogspot.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
sekalian mau minta petunjuk mas adhy, kok pada menu search di id <span class='menusearch'> error ya, saya simpan dibagian menu drow, ada solusinya mas adhy?

Balas

ha ha ha....itu bukan karena ngeliatin html mbak,tp karena kebanyakan ngeliat cewek.kwkwkw(becanda kang adhy)

Balas

Betul sis, seperti saya katakan di atas jika link fontnya hanya mengandung 1 jenis font itu tidak masalah di validasinya. Yang jadi masalah itu 1 link font yang terdiri dari beberapa jenis font dengan dipisangkan dengan kode | di antara jenis font-nya seperti ini

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

Link font di atas memiliki 3 jenis font di dalamnya.
Sedangkan yang dipakai sis Leony adalah 1 link font dengan 1 jenis font seperti ini
<link href='http://fonts.googleapis.com/css?family=Arimo:400,700,400italic,700italic' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'/>

Balas

Untuk error itu disebutkan bahwa element span tidak bisa dijadikan anakan dari element ul. Solusinya coba rubah span menjadi li seperti ini <li class='menusearch'> begitu juga penutupnya rubah menjadi </li> atau silahkan simpan kode menusearch-nya setelah/di bawah kode </ul> sehingga tidak menjadi anakan element ul.

Balas

Bukan mas, begini untuk mendapatkan css font-nya silahkan copy paste link font seperti ini misalnya http://fonts.googleapis.com/css?family=Roboto di address bar browser kemudian klik enter. nah itu pada halamannya akan tampak kode-kode css font-nya misalnya seperti 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 copy kode css tersebut dan simpan di edit html blog seperti saya jelaskan di atas.

Balas

saya belum pernah tuh error kaya kitu kang hehehe

Balas

Kunjungan Silaturrahmi Kang Adhy, Untuk header saat ini saya lebih suka menggunakan background image....mohon di koreksi

Balas

siip mas :D saya coba dulu :-d

Balas

Wah ini yang saya cari, karena baru-baru ini template saya error html5 dibagian font. Setelah ikuti cara diatas akhirnya berhasil, thanks mas Adhy :)

Balas

wah apakah ini bisa dipasang di blog saya ini soalnya gak ngerti kode kode gituan
http://santri-update.blogspot.com

Balas

ijin curi kodinya mas..! sapa tau lain waktu saya membutuhkannya. oh ya mas, profil G+ sekarang ada pemberitahuannya tantang berapakali profil kita dikunjung (per hari) oleh pengguna lain ya mas?

penampakan: hxxp://s19.postimg.org/4rkhkwwzn/tes_g.png

Balas

waw kang adhi mantaf :d saya gag pernah ganti templet nih
iya saya sendiri pake css font mas adhi tapi load tambah gede tapi agak cepet sih

Balas

Syukur deh udah teratasi errornya :)

Balas

Hadeueuehhh hehehehe =D

Balas

Hehehe berarti kang Intan sudah betul menyimpannya :)

Balas

Itu sih tergantung kita masing-masing mas :) asal jangan terlalu membebani loading blog itu udah bagus.

Balas

Alhamdulillah ya mas hehehehe :)

Balas

Jika ternyata error, bisa dicoba trik ini mas :)

Balas

Betul mas, Google kini sedang galau hehehe semua fiturnya terus dikembangkan :)

Balas

Betul mas dengan css font jadi mengatasi render-blockin css sehingga loading blog lebih meningkat.

Balas

Horeeee.......akhirnya dapat juga tips-ya.....Kang Adhy...jempol deh buat Akang :) (y) ....sebelumnya saya memaaii template buatan Mas Andes(BMA Lovers) ..saya temukan kasus seperti di atas...setelah saya baca tipsnya BERHASIL !!! loadiing blog aga ringan ....Jempol lagi buat Kang Adhy :)

Balas

Seperti biasa mas Adhy, saya turut membaca dan merevisi template saya. hahaha..
Yah, maklumlah semua pengetahuan saya, yg sedikit ini, cuma dari mas Adhy.

Terima Kasih.
Hormat saya Marlon Alamo (Hotline Terkini, AndroKompi, Mari Ketawa). Tengok dunk mas Adhy, bantuin..

Balas

betul kang, ternyata Saya baru - baru ini cek di Firefox 5, link font tersebut tidak bekerja pada browser versi ini. Jadinya tidak Cross Browser. :D

Balas

Lama tak mampir.kumaha kabarna kang?damang?Untuk masalah html template dan seo saya awam bgt.perlu belajar lagi.ntar klo sudah nyantey pengen ganti template yang di desain sama kang adhy.kira2 pake yang mana ya kang.trims!

Balas

kode yang kepasang jadinya gini kang?


#PopularPosts1 ul li a:hover {color:#b0130d;text-decoration:none;}]]></b:skin>
<style type='text/css'>
/* -----------------------------------------------
Blogger Template Style
Name : Kompi Banget
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');

Balas

hanya bisa menyimak kang adhy semua sudah dijelaskan di atas n komen.. :)

Balas

Sebentar-sebentar sebelum saya komentar ko serasa ada yg baru gitu kang hehe .. congrats kang

Balas

mas
ADHY SURYADI,saya mau tanya bagaimana cara membuat template manga dan anime yang bagus untuk blog?

Balas

Siipp mas hehhehe :)

Balas

Sama-sama mas, saya juga sama masih sedikit pengetahuannya masih harus banyak belajar :)
Siap mas hhehehe

Balas

Hehehehe alhamdulillah damang kang :)
Silahkan coba template Kompi Males kang :)

Balas

Ya...seperti itu kang untuk link font yang dirubah menjadi CSS font (font-face)

Balas

Mudah-mudahan bisa dimengerti ya mas :)

Balas

Hanya sedikit di homepage kang :)
Bingung cari bahan artikel malah blog jadi korbannya heheheehe

Balas

Coba di Maskolis ada template buat komik, kayaknya cocok juga buat manga :)

Balas

mantap kang, saya baru tau.. maklum kelamaan tapa :D
ada sedikit tambahan, tapi di blog saya ya... lumayan buat bahan postingan :D

Balas

Siip kang biar tambah variasi cara mengatasinya :)
Iya kelamaan teuing tapanya :D hhehehe sok ah mulai lagi :p

Balas

iya kang... kelamaan jadi ga tau tentang dunia persilatan :D

Balas

wih tampilan baru kang :]

Balas

lebih ok tampilan barunya kang :)

Balas

Salam santun, selmat sore.
Mulai belajar Validasi Link-Font. Makasih ya mas Adhy, ditemplate saya ternyata 1 link-font untuk 3 Fonts. Untung saja mas Adhy membagikan post ini. Sekalian deh di benerin.
Sekali lagi terima kasih sudah berbagi Validasi Link-Font di Head Blog.
Salam.

Balas

Hehehee hanya merubah sedikit aja sis :D lagi bosen hehehee

Balas

Hehehe makasih mas :)

Balas

Salam juga mas... semoga errornya bisa diatasi :)

Balas

saya juga lebih memilih menyimpan font di dalam css
hehheheheh :)

Balas

sebetulnya anda lebih memilih cloningan daripada simpan script, jadi anda tidak perlu berkomentar biar tidak menambah kesal sama sahabat disni

Balas

Betul yah Kang Adhy, dan template Kompi Males
Sudah saya rasakan, sehingga saya nyaman memakai
Template dari Kang Adhy itu. makasih Kang Adhy :-bd

Balas

Kunjungan Rutin Kang, nyimak lagi artikelnya, semanget terus Kang Adhy
Di tunggu artikel baru selanjutnya Yah kang..?

Balas

gan, coba kalo gini gimana
<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow:400,700' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>


apakah jadi begini

@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400,700;
src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/Oswald/v10/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
}

@font-face {
font-family: 'Archivo+Narrow';
font-style: normal;
font-weight: 400,700;
src: local('Archivo+Narrow Regular'), local('Archivo+Narrow-Regular'), url(http://themes.googleusercontent.com/static/fonts/Archivo+Narrow/v10/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
}

Balas

trimakasih mas....jadi tambah wawasan.

Balas

pantesan punya masih ada erorr ternyata tips nya hanya di pisah aja,makasih kang jadi blog saya tetap valid html5

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×