Home / HTML5 / Tutorial Blogger / Validasi HTML5 Link Google Font

Cara Download Validasi HTML5 Link Google Font Update Terbaru

Sedikit Info Seputar Validasi HTML5 Link Google Font Terbaru 2017 - Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Validasi HTML5 Link Google Font, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang Artikel HTML5, Artikel Tutorial Blogger, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Validasi HTML5 Link Google Font Terbaru
link: Validasi HTML5 Link Google Font

"jangan lupa baca juga artikel dari kami yang lain dibawah"

Berbagi Validasi HTML5 Link Google Font Terbaru dan Terlengkap 2017

Google Font

Masih membahas tentang Validasi HTML5, artikel ini adalah artikel rangkuman dari artikel yang sudah dibahas oleh +Adhy Suryadi pada Link Font Di Head Blog Error Validasi HTML5 dan +Kang Ismet pada Validasi HTML5 Pada Link Google Font. Alasan link tersebut tidak valid, karena url pada link tersebut dianggap sebagai url ilegal.

Sepertinya ada perbaikan baru pada sistem HTML5. Untuk mengatasi masalah tersebut terdapat 3 pilihan untuk mengatasinya, oleh karena itu silakan di simak.

Cara Pertama : Memisahkan Jenis Font

Contoh Error pada link font google. 

<link href='http://fonts.googleapis.com/css?family=Roboto:700,400,300,300italic,400italic,700italic|Oswald' rel='stylesheet' type='text/css'/>
Dalam font diatas terdapat 2 jenis varian font antara lain jenis Roboto dan Oswald, kedua font tersebut digabungkan dalam satu link dengan kode pemisah | . Untuk mengatasinya Anda harus pisahkan kedua varian font tersebut menjadi dua link, seperti dibawah ini.

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

Cara Kedua : Merubah Font Menjadi CSS

Silakan Anda buka link pada font google untuk melihat kode CSS yang akan dipasang.

<link href='http://fonts.googleapis.com/css?family=Roboto:700,400,300,300italic,400italic,700italic' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
Perhatikan url yang Saya tandai, silakan Anda buka di browser Anda url tersebut. Anda akan menemukan kode CSS yang akan dipasang. Dari kedua URL tersebut di dapat CSS seperti dibawah ini. 

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

@font-face {
  font-family:'Roboto';
  font-style:normal;
  font-weight:300;
  src:local('Roboto Light'),local('Roboto-Light'),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/Hgo13k-tfSpn0qi1SFdUfT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@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');
}

@font-face {
  font-family:'Roboto';
  font-style:normal;
  font-weight:700;
  src:local('Roboto Bold'),local('Roboto-Bold'),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face {
  font-family:'Roboto';
  font-style:italic;
  font-weight:300;
  src:local('Roboto Light Italic'),local('Roboto-LightItalic'),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/7m8l7TlFO-S3VkhHuR0at4bN6UDyHWBl620a-IRfuBk.woff) format('woff');
}

@font-face {
  font-family:'Roboto';
  font-style:italic;
  font-weight:400;
  src:local('Roboto Italic'),local('Roboto-Italic'),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}

@font-face {
  font-family:'Roboto';
  font-style:italic;
  font-weight:700;
  src:local('Roboto Bold Italic'),local('Roboto-BoldItalic'),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/t6Nd4cfPRhZP44Q5QAjcC4bN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
Selanjutnya silakan pasang kode tersebut diatas kode ]]></b:skin> atau kode </style>.

Cara Ketiga : Merubah Kode | Menjadi Kode %7

Perhatikan kode dibawah, ini adalah contoh link google font yang tidak valid. 

<link href='http://fonts.googleapis.com/css?family=Roboto:700,400,300,300italic,400italic,700italic|Oswald' rel='stylesheet' type='text/css'/>
Perhatikan kode yang Saya tandai, agar membuat link tersebut Valid HTML5 silakan Anda ganti kode tersebut dengan kode %7.

Itulah sedikit Artikel Validasi HTML5 Link Google Font terbaru dari kami

Semoga artikel Validasi HTML5 Link Google Font yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Validasi HTML5 Link Google Font

Share this