Sử dụng Google Fonts trong thiết kế web

Có một trở ngại đối với những người mới thiết kế web đó 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  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.

Có 2 cách để các bạn có thể gọi và tích hợp Google font vào trong Webssite: 

Cách thứ nhất: 
Với cách thứ nhất này các bạn có thể trực tiếp một file CSS từ thư mục của Gfont như sau: 

<link rel="stylesheet" type="text/css" href="http://fonts.Googleapis.com/css?family=Tangerine">

Và trong file CSS của mình các bạn định dạng font cho đối tượng như sau: 

#your_div {

font-family: 'Tangerine';

font-size: 48px;

}

Để sử dụng một số font khác nhau cho một số đối tượng ( ví dụ: logo 1 font, tiêu đề 1 font,...) các bạn có thể tải nhiều font cũng một lúc và mỗi font được cách nhau bởi ký tự "|" như ví dụ dưới đây. 

<link rel="stylesheet" type="text/css" href="http://fonts.Googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans">

Với mỗi font thì đều có các thuộc tính đi kèm với font đó ví dụ như thuộc tính Bold, Italic,... Do vậy trong quá trình tích hợp chúng ta có thể gọi các thuộc tính đó đi kèm với tên font. Các thuộc tính đó được quy định trong cách gọi của Google font như sau: 

bold:b

bold:700

italic:i

bolditalic:bi

<link rel="stylesheet" type="text/css" href="http://fonts.Googleapis.com/css?family=Cantarell:i|Droid+Serif:700">

Cách thứ hai: 

Trong cách thứ hai này chúng ta sẽ dùng hàm Load của Javascript để lấy về font mà ta cần sử dụng. 

WebFont.load({

Google: {

families: [ 'Tangerine', 'Cantarell' ]

},

typekit: 'myKitId',

custom: {

families: ['OneFont', 'AnotherFont'],

urls: [ 'http://myotherwebfontprovider.com/stylesheet1.css',

'http://yetanotherwebfontprovider.com/stylesheet2.css' ]

}

});

Một vài chú ý. 

1. Đối với khách lần đầu tiên khi vào Website của bạn thì có một điều chắc chắn sẽ xảy ra đó là font tải về hơi chậm, bạn phải chờ vài giây sau đó trình duyệt mới thay thế được font của bạn bằng Gfont. Để khắc phục điều đó chúng ta có thể sử dụng thủ thuật load font trước khi load các đối tượng cần thay thế font. 

body {

font-family: 'Tangerine', serif;

font-size: 48px;

}

2. Đề phòng tình huống xảy ra khi không load được font trên Google chúng ta cần khai báo thêm họ của font cần thay thế. Khi đó trong trường hợp không tải được font về thì trình duyệt sẽ tự động thay thế bằng một font tương tự cùng họ font với font cần load. 

.wf-active p {

font-family: 'Tangerine', serif;

}