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.

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

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ự.

21 bình luận

  1. avatar Nặc danh says

    lúc 21:44 21 tháng 8, 2014

    Bạn ơi, mình làm như hướng dẫn nhưng vẫn bị lỗi phần Tên bài viết. Bạn giúp mình được không baohoangblog.blogspt.com

  2. avatar says

    lúc 21:45 21 tháng 8, 2014

    Blog không tồn tại bạn ơi. Kiểm tra lại nhé ^^

  3. avatar Nặc danh says

    lúc 22:27 21 tháng 8, 2014

    Được rồi đấy anh :)

  4. avatar says

    lúc 22:32 21 tháng 8, 2014

    Bây giờ cụ thể em muốn font được chuẩn HTML5 hay là muốn sửa lỗi font để anh hướng dẫn cho tiện :D

  5. avatar Nặc danh says

    lúc 22:39 21 tháng 8, 2014

    Anh thấy cái nào tối ưu thì sửa giúp em :)) mà anh có YM không, hay Skype cũng được :D

  6. avatar says

    lúc 22:43 21 tháng 8, 2014

    Không cần đâu em, cái này đơn giản mà. Việc đầu tiên thì em xóa những cái mà em đã làm đi cho chắc.

    Tiếp tục em tìm đến đoạn mã sau
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic|Pacifico' rel='stylesheet' type='text/css'/>
    và thay thế bằng
    <style type="text/css">
    @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v9/59ZRklaO5bWGqF5A9baEEVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/opensans/v9/59ZRklaO5bWGqF5A9baEET8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
    }
    @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://fonts.gstatic.com/s/opensans/v9/MTP_ySUJH_bn48VBG8sNSoZI5FoslwusAsZHK_V0XCI.woff2) format('woff2'), url(http://fonts.gstatic.com/s/opensans/v9/MTP_ySUJH_bn48VBG8sNSnwUvq1pQaUIDqPgpae5ItU.woff) format('woff');
    }
    @font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v9/xjAJXh38I15wypJXxuGMBkqs5AeeBmydKTXp2rSeyjU.woff2) format('woff2'), url(http://fonts.gstatic.com/s/opensans/v9/xjAJXh38I15wypJXxuGMBkbnXQ06sCSpaytluCdpFnY.woff) format('woff');
    }
    @font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 600;
    src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(http://fonts.gstatic.com/s/opensans/v9/PRmiXeptR36kaC0GEAetxuFqIsTOIrGY5Ms-r8NycUQ.woff2) format('woff2'), url(http://fonts.gstatic.com/s/opensans/v9/PRmiXeptR36kaC0GEAetxrkV11xRSeRSsXvODowCrgc.woff) format('woff');
    }
    /* latin */
    @font-face {
    font-family: 'Pacifico';
    font-style: normal;
    font-weight: 400;
    src: local('Pacifico Regular'), local('Pacifico-Regular'), url(http://fonts.gstatic.com/s/pacifico/v6/Q_Z9mv4hySLTMoMjnk_rCfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'), url(http://fonts.gstatic.com/s/pacifico/v6/yunJt0R8tCvMyj_V4xSjafesZW2xOQ-xsNqO47m55DA.woff) format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
    }
    </style>

  7. avatar Nặc danh says

    lúc 22:52 21 tháng 8, 2014

    Ok rồi anh. Thank anh nhé. Chắc phải cần hỏi anh nhiều nhiều :))

  8. avatar says

    lúc 22:21 1 tháng 8, 2015

    Nâm cận cho mình hỏi mình cũng dùng font Roboto giống Lâm mà sao blog mình khi view bằng firefox font hiển thị rất tệ, ko đc như kslzone nhỉ :(

    http://i.imgur.com/IKJ0Sh6.jpg

  9. avatar says

    lúc 14:23 2 tháng 8, 2015

    Duy cho xem mã nhúng css đã chèn vào blog nào.

  10. avatar says

    lúc 15:06 2 tháng 8, 2015

    Hay là phải thêm &subset=latin,vietnamese nhỉ :D

    Giờ mới để ý

  11. avatar says

    lúc 15:41 2 tháng 8, 2015

    Vẫn ko đc :(

    View trên safari iphone và firefox laptop tệ như nhau

  12. avatar says

    lúc 19:40 4 tháng 8, 2015

    Dạo này cái Blogger nó báo thiếu nhận xét hoài ta =.=. Duy thử thêm 1 cái nữa latin-ext.
    &subset=latin,vietnamese,latin-ext

  13. avatar says

    lúc 20:55 4 tháng 8, 2015

    Tuyệt vời, cảm ơn Lâm nhiều :x <3

  14. avatar says

    lúc 22:03 4 tháng 8, 2015

    Nhiều posts trc đây tớ chèn font arial khi soạn thảo. Giờ có cách nào để cho các bài đó cũng đều về Roboto ko Lâm?

    Tớ thử thêm cái css !important mà ko đc. Ko biết có cách khác ko hay là do thêm xai

  15. avatar says

    lúc 01:19 6 tháng 8, 2015

    Bác coppy toàn bộ bài viết ra notepate sau đó coppy từ notepate ngược lại bài viết ! đó là cách nhanh nhất ! để xóa bỏ font khi soạn thảo :))

  16. avatar says

    lúc 18:43 6 tháng 8, 2015

    Giả sử bác ấy có 50 bài viết thôi thì công tác thủ công này bác ấy có copy paste thôi cũng gãy ngón tay rồi! Cách này e không ổn :->

  17. avatar says

    lúc 19:34 6 tháng 8, 2015

    Chắc chỉ có export blog ra và notepad thôi :D

  18. avatar says

    lúc 00:22 3 tháng 12, 2015

    Làm sao để có khung nhận xét như ad nhỉ .... (thay thế tên và URL khác)

  19. avatar says

    lúc 12:08 5 tháng 12, 2015

    Vào Cài đặt -> Bài đăng và Nhận xét -> Nhận xét -> Chọn Bất kỳ người nào - bao gồm cả Người dùng ẩn danh là được

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.