Chuyên trang chia sẻ các kiến thức liên quan đến WordPress và Phát triển Website.

Sử dụng Google Fonts trong Blogspot

By on 03/07/2014 in Blogspot with 15 Comments

Một trở ngại đối với những người mới bắt đầu sử dụng blogspot làm dịch vụ tạo blog đó chính là việc hiển thị tiếng Việt không được chính xác cho lắm, ví dụ như việc hiển thị dấu ngã, hỏi, hay các chữ viết hoa có dấu. Lý do là font của template mà bạn đang sử dụng không hỗ trợ việc hiển thị tiếng Việt :D Có một cách giải quyết đó chính là thay font cho template mà Google Fonts là 1 sự lựa chọn hàng đầu vì tốc độ tải không ảnh hưởng đến blog cũng như bạn sẽ có 1 thư viện với hơn 600 font :D

Yêu cầu kiểu font chữ bạn mong muốn

Bạn thêm liên kết khai báo google font vào blog để yêu cầu font chữ mà bạn muốn, liên kết này có dạng:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

Trong liên kết trên, http://fonts.googleapis.com/css?family=Font+Name là stylesheet link của font chữ mà bạn muốn sử dụng cho blog của mình, để có được stylesheet link này, bạn có thể vào thư viện Google Font. Trong thư viện này bạn có thể tìm thấy rất nhiều font chữ mà bạn có thể lựa chọn. Ví dụ như mình muốn sử dụng font Inconsolata thì stylesheet link của mình sẽ là:

http://fonts.googleapis.com/css?family=Inconsolata

Nếu tên font có khoảng trắng thì bạn thay khoảng trắng này bằng ký tự (+)

Để yêu cầu nhiều font chữ cùng một lúc, bạn ngăn cách các font chữ này bằng ký tự (|)

Ví dụ, mình yêu cầu 3 font chữ Tangerine, Inconsolata và Droid Sans thì stylesheet link của mình sẽ là:

http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

Bạn có thể tham khảo thêm Top recommended fonts from Google Web Fonts :D

Sau khi thay thế stylesheet link vào liên kết khai báo font, bạn chèn liên kết đó vào sau thẻ head trong phần Edit Html, giống như hình dưới:

Untitled

Sủ dụng Google Font đã khai báo vào blog

Sau khi thêm liên kết yêu cầu font chữ, bạn có thể sử dụng các font chữ đó vào blog của mình qua CSS (bên trong thẻ [b:skin] [/b:skin] hoặc trực tiếp vào các phần tử. Ví dụ như:

Sử dụng font mà bạn đã khai báo thông qua CSS bằng cách:

CSS selector {
font-family: 'Font Name', serif;
}

Hoặc thêm trực tiếp vào các phần tử:

<div style="font-family: 'Font Name', serif;">Your text</div>

Done, vậy là bạn đã có thể bắt đầu sử dụng Google Font vào blogspot rồi :D tuy nhiên những font chữ mà bạn dùng sẽ ở dạng mặc định, để có thêm nhiều hiệu ứng cho chữ, bạn có thể tham khảo qua Google Font Developer :D

Lời kết

Trong bài viết này mình đã hướng dẫn các bạn sử dụng Google Font vào Blogspot, công việc này sẽ thật sự dễ dàng nếu bạn có 1 chút kiến thức về CSS :D Mình mong rằng bạn sẽ thành công với việc hiển thị tốt nhất trên blog của mình

Thân,

Đặng Bách

Cùng ghé thăm blog của Đặng Bách nhé :D

Từ khóa: , , ,

Giới thiệu tác giả

Giới thiệu tác giả: Ăn, chơi, ngủ, học, SEO và MMO .

Bài này có 15 bình luận

Trackback URL | Comments RSS Feed

  1. Ma Vinh Cuong says:

    Anh @Đặng Bách cho em hỏi, em thay đổi font mặc định trong template thành Open Sans sau đó em truy cập bằng máy tính thì lại hiện ra một font khác (cũng hỗ trợ tiếng việt), còn truy cập trên điện thoại thì lại hiện đúng font
    PS: em đã thử đổi trình duyệt nhưng vẫn vậy

    • Vậy thì template của bạn là giao diện Responsive. Bạn Inspect Element 1 đoạn text và nhìn sang bên phải xem là font gì rồi tìm trong template và thay nhé :D

  2. Tuấn Phan says:

    Theo mình nên sử dụng CSS cho các ăn, chứ sử dụng cái này tốc độ load trang ì ạch lắm

  3. Mình cũng đang sử dụng google font ở trang này. Nó load hơi chậm thì phải.
    http://thegioiloc.blogspot.com/2014/07/bong-loc-bui-g1-bong-loc-bui-g2-bong.html

  4. hoang tuan says:

    Cảm ơn Bạn Thạch Phạm về chuyện tư vấn chuyển Domain hôm trước rất nhiều và cả nội dung bài viết này nữa, mình không phải là người chuyên nghiệp..Nên những hướng dẫn của bạn rất thiết thực. Chúc bạn luôn vui và có nhiều bài chia sẻ hay đến cộng đồng

  5. Mình thấy là Google Fonts làm tốc độ tải của website chậm đi rất nhiều.

  6. Hi vong ad post nhieu hon ve Bloger

  7. linh nguyen says:

    Cái này giờ mình mới biết, mò mãi mới ra, cám ơn bạn nhé

  8. Thank ban nha mình cũng đang vọc về bloger

  9. Cũng mới “phá” blogspot :) nên chưa biết dụ này, gặp bài viết của anh ở đây thì hay quá

  10. Viết thêm nhiều tut về blogspot nữa đi bạn ơi :)
    Làm một serial bài về xây dựng template blogspot đi bạn, hóng :)

  11. Người ta gọi là ý tưởng lớn gặp nhau ^_^

  12. Đôn says:

    vừa làm một bài sử dụng icon fontawesome, sang thạch phạm đã có bài về iconfont rồi:))

KHÔNG ĐĂNG CODE VÀO BÌNH LUẬN!

Nếu bạn muốn đăng code vào khu vực bình luận cho việc hỏi đáp, hãy đăng code vào PasteBin rồi đăng link vào bình luận để tránh xảy ra xung đột và dễ đọc hơn.

Lưu ý: Đừng thử SPAM, dù spam được thì comment bạn live cao lắm là 24h và sẽ bị block domain và email vĩnh viễn trên nhiều site khác nhau.

Gửi bình luận

Your email address will not be published. Required fields are marked *

Top