Cách 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.

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">

#your_div {
  font-family: 'Tangerine';
  font-size: 48px;
}

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

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">

WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell' ]
},
typekit: 'myKitId',
custom: {
families: ['OneFont', 'AnotherFont'],
urls: [ 'http://myotherwebfontprovider.com/stylesheet1.css',
'http://yetanotherwebfontprovider.com/stylesheet2.css' ]
}
});

Chuyên Mục: Css

Bài viết được đăng bởi webmaster