Tích hợp Google fonts vào Website

Gfonts (Google fonts) là một ý tưởng mới được xuất phát từ một số Website trò chơi khi họ chèn vào Web một số font ngỗ nghĩnh đẹp mắt. Toàn bộ các font trong Gfont được để trong một nguồn trên Internet và các nhà phát triển Website có thể lấy một hoặc nhiều font từ nguồn đó và tích hợp vào trong Website của mình.
Google Font 

Toàn bộ các font trong Google font là những font hoàn toàn miễn phí và bạn có thể sử dụng những font chữ đó cho bất kỳ một Website nào (Blog cá nhân hoặc một những Website mang tính chất thương mại). Bộ siêu tập font của Google càng ngày càng nhiều và đó cũng là một nguồn tốt để các nhà phát triển Website hay các Designer có nhiều ý tưởng mới lạ cho những thiết kế của mình.

Sau đây tôi xin hướng dẫn các bạn một số cách để các bạn có thể tích hợp Google font vào trong Website của mình:

Có 2 cách để các bạn có thể gọi và tích hợp các 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;
}