SỬ DỤNG GOOGLE FONTS CHUẨN HTML5 CHO BLOGGER

Trước đây thì minh có một bài viết hướng dẫn chung về cách sử dụng mã nhúng Google Fonts chuẩn HTML5 cho tất cả các mã nguồn rồi, nhưng với thằng Blogger này thì khác. Đối với Blogger thì việc sử dụng mấy ký tự đặc biệt bằng HTML chã ăn thua tý, thay "&" thành "&" đã đời thì check cũng vẫn bị lỗi. Chính vì thế mà một trong những tiện ích hay như bài viết liên quan cũng phải nhờ các cao thủ viết lại cho được chuẩn HTML5 này.

Trong tương lai thì muốn những tiện ích hay mà được chuẩn HTML5 thì chắc còn phải đợi coding lại nhiều. Bài viết này thì mình sẽ hướng dẫn các bạn cách để các bạn sử dụng Google Font trên Blogger mà không sợ bị lỗi liếc gì nữa.

Sử dụng Google Fonts chuẩn HTML5 cho Blogger

Ý tưởng để khắc phục việc này thì rất đơn giản, mình giải thích sơ qua rồi chúng ta tiến hành nhé. Như chúng ta đã biết thì để chèn một font nào đó từ Google Fonts thì chúng ta phải sử dụng qua mã nhúng, ví dụ mình sử dụng lại mã nhúng mà mình đã ví dụ ở bài viết trước.

<link href='http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,vietnamese' rel='stylesheet' type='text/css'/>

Thế bạn có biết mã nhúng link có nhiệm vụ gì không, mã nhúng link là có nhiệm vụ lôi css từ một tập tin, một file css nào đó về website của chúng ta để sử dụng. Vậy cách thức mà mình hướng dẫn khắc phục ở đây là gì, quá dễ truy cập thẳng vào đường link của mã nhúng đó và lôi toàn bộ css trong đó trực tiếp về Blogger của chúng ta.

Như đường link ở trên bạn thử truy cập vào đường dẫn

http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,vietnamese

bạn sẽ thấy những đoạn css như thế này

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/59ZRklaO5bWGqF5A9baEET8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

Lúc này thì việc bạn cần làm là sao chép toàn bộ đoạn css trên trực tiếp vào bên trong template của bạn. Bạn tìm đến <b:skin><![CDATA[

chèn vào sau nó đoạn mã đó, ví dụ sau khi làm trong thì template của bạn sẽ có dạng như thế này

<b:skin><![CDATA[/*
-----------------------------------------------
KslZone Blogger Template
Name    : ABC
Author  : KSL
Url     : XXX
----------------------------------------------- */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/59ZRklaO5bWGqF5A9baEET8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
..................
..................
..................
]]></b:skin>

các bạn lưu ý là không có chèn vào trong đoạn chú thích nhé, vào đó thì không có hiện tượng gì xảy ra trên blog đâu :D Sau khi làm xong là thành công rồi đấy.

Lời kết

Như vậy thì bạn đã thấy cách thức để sử dụng Google Fonts thế nào cho Blogger để đạt được chuẩn HTML5 rồi đấy. Nếu bạn đã hiểu những gì mình đã nói ở trên thì đối với bất kì mã nhúng css tương tự nào bạn cũng có thể khắc phục bằng cách thức tương tự.