Roboto webfont (hosted on Google Code)

Roboto webfont preview

Nếu đã dùng qua Android 4 (ICS – Ice Cream Sandwich) chắc hẳn các bạn đã biết đến font Roboto, không những chỉ có trên ICS, một số nhà phát triển cũng đã thêm font này vào trong rom không chính thức của mình ở những phiên bản Android thấp hơn.

Google cũng đã phát hành và cho phép các nhà phát triển tải font này về từ rất lâu, để có thể dùng font này trên máy tính, bạn có thể truy cập vào địa chỉ sau rồi tải về:

http://developer.android.com/design/style/typography.html

 

Vậy còn webfont thì sao?

Google hiện cũng có một bộ sưu tập hơn 500 (hiện tại là 501) webfont để sử dụng cho web, tuy nhiên số lượng web font hỗ trợ tiếng Việt còn rất ít, chỉ có 4/501 webfont trong bộ sưu tập của Google webfont có hỗ trợ tiếng Việt, còn lại thì hoàn toàn không.

Roboto webfont cũng đã được FontSquirrel cung cấp miễn phí tại:

http://www.fontsquirrel.com/fonts/roboto

Tuy nhiên, vẫn còn 1 giới hạn là bạn phải tải về sau đó upload lên host của mình mới có thể sử dụng được, có một chút bất tiện và cũng ảnh hưởng kha khá đến tốt độ tải website của bạn.

 

Giải pháp lưu trữ webfont trên Google Code

Ban đầu, với ý định sẽ sử dụng Google AppEngine để lưu trữ bộ webfont của Roboto trên đó, tuy nhiên, bản miễn phí giới hạn 1GB băng thông mỗi ngày, do đó rất khó lòng để sử dụng rộng rãi khi chỉ có 1GB băng thông.

Vò đầu bứt óc chợt vô tình phát hiện ra Google Code, mình đã xem khá kỹ hướng dẫn và FAQ và không thấy nói nhiều đến băng thông, còn lưu trữ thì được miễn phí đến 4GB, quá nhiều khi bộ webfont này chỉ cần có khoảng 3MB.

Một số ưu điểm của Google Code:

  • Sử dụng proxy của Google nên sẽ truy cập nhanh hơn rất nhiều.
  • Băng thông không thấy nhắc đến nên mình nghĩ có lẽ là… không giới hạn.

 

 

Cách sử dụng Roboto webfont

Cách sử dụng Roboto webfont cũng khá đơn giản, đơn giản như với Google Webfont vậy. Để thêm font vào website của mình, bạn có thể sử dụng thẻ <link> (nằm giữa thẻ <head></head>) hoặc dùng @import nếu bạn không thể chỉnh sữa file html.

 

Thêm web font Roboto với thẻ <link>

Để thêm toàn bộ webfont của Roboto, bạn có thể thêm mã sau vào giữa thẻ <head> và </head> trên website của mình

<link href=”http://roboto-webfont.googlecode.com/files/Roboto.css&#8221; rel=”stylesheet” type=”text/css”>

Thêm web font Roboto vào file CSS (stylesheet) với @import

Trong trường hợp bạn không thể can thiệp vào mã nguồn của website để thêm thẻ <link>, chúng ta vẫn còn cách khác đó là dùng @import để import file này vào file CSS của bạn.

@import url(http://roboto-webfont.googlecode.com/files/Roboto.css&#8217;);

Sử dụng web font Roboto thay thế cho font mặc định

Để thay thế font Roboto cho font mặc định, bạn tìm đến body trong CSS, thêm vào đoạn sau ở giữa dấu ngặc { và }, thẻ body của CSS sẽ có dạng:

body { font-family: ‘Roboto’,  serif; }

Bộ web font này bao gồm: Roboto, Roboto Black, Roboto Condensed, Roboto Light, Roboto Thin, Roboto Medium, bạn có thể thay thế ‘Roboto’ ở trên bằng một trong những tên này để có được webfont ưng ý cho website của mình.😀

Nếu có thắc mắc hay góp ý gì, vui lòng để lại comment bên dưới nhé😀

Gửi phản hồi

Please log in using one of these methods to post your comment:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s