Upload và sử dụng font chữ riêng cho Blogspot

Mạc định Blogger chỉ cho chúng ta sử dụng một số font của nó trong công cụ đăng bài mới, ngoài ra bạn cũng có thể tùy chỉnh font trong CSS nhưng các font này phải phổ biến trên internet ví dụ như Segoe UI... Bạn cũng có thể sử dụng công cụ Google Fonts để tìm những font chữ đẹp cho Blog của mình tuy nhiên có nhiều font chữ đẹp nhưng lại không hỗ trợ tiếng Việt (chưa Việt hóa)

Ở bài này mình xin chia sẻ với các bạn cách upload và sử dụng font chữ riêng cho Blogspot 
Mình hay tìm font Việt hóa đẹp trên trang Vietdesigner, có nhiều font đẹp tinh tế và lạ mắt cho bạn lựa chọn. Sau khi có được một font chữ ưng ý, các bạn thực hiện các bước

Bước 1:
Convert font chữ thành định dạng cho web có thể đọc được trên mọi trình duyệt, thông thường font chữ của chúng ta có định dạng TFF hay OFT, chuyển đổi bằng một trong các công cụ online sau
Fontsquirrels
Font2web

Ở đây mình sử dụng Fontsquirrels :

Tải xuống file zip bao gồm các file có định dạng .woff, .woff2, .tff, .svg, .eot và css

Bước 2:

Upload các file trên lên Dropbox, hoặc Google Drive để làm host sau đó lấy link các file. Ở đây mình chọn Google Drive, bạn có thể xem hướng dẫn sử dụng Google Drive làm host cho Blogspot tại đây.

Các bạn chỉ cần upload 5 file .woff, .woff2, .tff, .svg, .eot thôi nhé, Mình copy 5 link ra ngoài notepad cho tiện tí nữa sử dụng

Bước 3:

Mở file stylesheet.css nằm cùng với 5 file lúc nảy download về

@font-face {

    font-family: 'iciel_soup_of_justiceregular';

    src: url('icielsoupofjustice-webfont.eot');

    src: url('icielsoupofjustice-webfont.eot?#iefix') format('embedded-opentype'),

         url('icielsoupofjustice-webfont.woff2') format('woff2'),

         url('icielsoupofjustice-webfont.woff') format('woff'),

         url('icielsoupofjustice-webfont.ttf') format('truetype'),

         url('icielsoupofjustice-webfont.svg#iciel_soup_of_justiceregular') format('svg');

    font-weight: normal;

    font-style: normal;

}

Thay những dòng bôi sáng bằng các link đến file tương ứng:

@font-face {

    font-family: 'iciel_soup_of_justiceregular';

    src: url('googledrive.com/host/0B-6lEgSKzg7EY3BFNVJxRURRWlE/icielsoupofjustice-webfont.eot');

    src: url('googledrive.com/host/0B-6lEgSKzg7EY3BFNVJxRURRWlE/icielsoupofjustice-webfont.eot?#iefix') format('embedded-opentype'),

         url('googledrive.com/host/0B-6lEgSKzg7EY3BFNVJxRURRWlE/icielsoupofjustice-webfont.woff2') format('woff2'),

         url('googledrive.com/host/0B-6lEgSKzg7EY3BFNVJxRURRWlE/icielsoupofjustice-webfont.woff') format('woff'),

         url('googledrive.com/host/0B-6lEgSKzg7EY3BFNVJxRURRWlE/icielsoupofjustice-webfont.ttf') format('truetype'),

         url('googledrive.com/host/0B-6lEgSKzg7EY3BFNVJxRURRWlE/icielsoupofjustice-webfont.svg#iciel_soup_of_justiceregular') format('svg');

    font-weight: normal;

    font-style: normal;

}

Bước 4:
Vào Template > Edit HTML tìm thẻ  ]]></b:skin>
Copy và paste đoạn CSS lên phía trên thẻ vừa tìm được

Bước 5:
Thay đổi thành phần muốn thay đổi font, ví dụ bạn muốn thay đổi font của tiêu đề bài post thì bạn tìm  h3.post-title, .comments h4 trong template và thay đổi CSS

 h3.post-title, .comments h4 {

font-family: 'fontname';

font-size: 28;

}

 OK vậy là xong chúc các bạn thành công với trang Blog mang phong cách riêng của mình !