´

Sử dụng Google Fonts trong Blogspot

Blogspot

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:

Đặng Bách

Ăn, chơi, ngủ, học, SEO và MMO

Xem tất cả bài viết của Đặng Bách