Cách thêm font vào website.

Hướng dẫn tích hợp font vào Website và Blogspot.

Lòng vòng ở một số site nước ngoài, thấy site của họ sử dụng một số font chữ khá đẹp. Thấy hay nên tôi viết hướng dẫn này chia sẻ với những bạn còn chưa biết cách tích hợp font vào website hay blog của mình.

Tôi sẽ lấy ví dụ về cách tích hợp font icon của trang Mashable.com làm Demo (bạn có thể vào trang đó xem thử) :

Vùng khoanh đỏ là sử dụng Font MashIcon của trang Mashable.com

Chế độ Source HTML chúng ta sẽ thấy trang này sử dụng font-family:'Mashicons'
Mã content hiển thị biểu tượng (Ví dụ Facebook) sẽ là : content: "\e007";

Để có những icon này và mã hiển thị như vậy thì họ đã phải xây dựng riêng cho mình bộ Font chữ này. Đây là cách mà trang đó tích hợp font để có thể hiển thị như mong muốn khi gọi với font-family:'Mashicons';

<style type="text/css">
@font-face{font-family:'Mashicons';src:url(http://rack.0.mshcdn.com/assets/mashicons-webfont-ed6bdab66005fc22c4a2c041397aa51e.eot);src:url(http://rack.0.mshcdn.com/assets/mashicons-webfont.eot?#iefix) format("embedded-opentype"),url(http://rack.3.mshcdn.com/assets/mashicons-webfont-5632f21abdc7c4cd901faaa6a04a931a.svg) format("svg"),url(http://rack.3.mshcdn.com/assets/mashicons-webfont-9ab80858e53a69476ec3a38c3c1f9fe8.woff) format("woff");font-weight:normal;font-style:normal}
}
</style>

Với cách này, bạn có thể Add tương tự những font đẹp khác có trên Google và các trang chia sẻ khác.


Minh Anh - Vui lòng ghi rõ nguồn Erhay khi bạn phát hành thông tin từ trang này.