Cách dùng Google Fonts cho website hoặc blog của bạn

by Unknown 9:59:00 AM 0 nhận xét

Với bộ font chữ mặc định trên máy tính, bạn cảm thấy trở nên nhàm chán trong thiết kế web thì nay bạn đã có thể dùng nhiều loại font chữ khác để làm cho website mình trở nên đẹp và chuyên nghiệp hơn. Giải pháp dễ dàng nhất là sử dụng Google fonts, sau đây là 3 bước đơn giản để bạn sử dụng Google font cho website hoặc blog của mình.

Bước 1: Chọn Google fonts mà bạn thích
Bạn truy cập vào www.google.com/fonts, trong danh sách font bạn thấy, hãy chọn ra font bạn thích và nhấn Quick Use.

Sau đó chọn kiểu font bạn muốn embed vào web, lưu ý bạn càng add nhiều font thì tốc độ load càng chậm, bạn có thể xem đồng hồ đo thời gian load ngay bên phải:

Bước 2: Nhúng Google fonts vừa chọn vào website hoặc blog
Có 3 kiểu nhúng khác nhau mà bạn có thể lựa chọn phù hợp với website của mình:

Kiểu 1: Gắn thẻ link vào trước thẻ </head>

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Kiểu 2: Import vào file css

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

Kiểu 3: Sử dụng Javascript, gắn trước thẻ </head>

<script type="text/javascript">

      WebFontConfig = {

        google: { families: [ 'Open+Sans::latin' ] }

      };

      (function() {

        var wf = document.createElement('script');

        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +

          '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';

        wf.type = 'text/javascript';

        wf.async = 'true';

        var s = document.getElementsByTagName('script')[0];

        s.parentNode.insertBefore(wf, s);

      })(); </script>

Bước 3: Sử dụng Google fonts
Bạn chỉ cần gọi font đó ra trong css, ví dụ:

font-family: 'Open Sans', sans-serif;

 
Chúc các bạn thành công!



Xem thêm:
- Tổng hợp hơn 130 font chữ thư pháp và font chữ viết tay đẹp cho Designer
- Bộ sưu tập hàng trăm logo vector tuyệt đẹp download miễn phí
- Một số mẫu logo vector đẹp download miễn phí
- Cách sử dụng @font-face trong thiết kế website