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.
Như đường link ở trên bạn thử truy cập vào đường dẫn
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
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'/>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,vietnamesebạ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');
}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>
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
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é ^^
lúc 22:27 21 tháng 8, 2014
Được rồi đấy anh :)
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
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
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>
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 :))
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
lúc 14:23 2 tháng 8, 2015
Duy cho xem mã nhúng css đã chèn vào blog nào.
lúc 15:01 2 tháng 8, 2015
Đây Lâm ơi :(
http://pastebin.com/crneVSiF
lúc 15:06 2 tháng 8, 2015
Hay là phải thêm &subset=latin,vietnamese nhỉ :D
Giờ mới để ý
lúc 15:41 2 tháng 8, 2015
Vẫn ko đc :(
View trên safari iphone và firefox laptop tệ như nhau
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
lúc 20:55 4 tháng 8, 2015
Tuyệt vời, cảm ơn Lâm nhiều :x <3
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
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 :))
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 :->
lúc 19:34 6 tháng 8, 2015
Chắc chỉ có export blog ra và notepad thôi :D
lúc 20:37 6 tháng 8, 2015
:(
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)
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