Validasi HTML5 pada Link Google Font

Validasi HTML5 pada Link Google Font - Setelah berkunjung ke blog Kang  +Adhy Suryadi Kompi Ajaib, saya baru tau Link Font di Tag Head mengakibatkan Error Validasi HTML5. Sepengetahuan saya hal ini sebelumnya tidak terjadi. Entah perbaikan, atau bug pada validator. Soalnya saya coba di Validator yang lain aman-aman saja.

Sebetulnya cara validasi HTML5 pada Link Font di Head sudah dijelaskan pada postingan Kompi Ajaib (baca : Link Font di Head Blog Error Validasi HTML5). Kalau saya simpulkan yaitu dengan dua alternatif yaitu :

1. Memisahkan masing-masing font.
2. Menggunakan @font-face pada CSS.

Rasa penasaran menyelimuti perasaan saya, kenapa bisa error validasi? Sebelum kepada penyebab error, saya contohkan link font yang error seperti ini :

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

Pesan yang muncul pada validator seperti ini :

Bad value http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700|Ropa+Sans|Oswald for attribute href on element link: Illegal character in query: not a URL code point.

Selidik punya selidik ternyata permasalahannya ada pada tanda pembatas antar font |) harus di escape menjadi %7C. Permasalahnnya sama dengan tanda & harus dirubah menjadi &. Jadi dari kode error di atas harus dirubah menjadi

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

Itulah solusi yang saya tambahkan dari postingan Kang Adhy "Kompi Ajaib" Suryadi. Silahkan sobat memilih cara mana yang akan digunakan.

Semoga bermanfaat...