Chọn và sử dụng font phù hợp cho chính website từ Google Fonts

Google font đã phát triển nhanh chóng và được nhiều lập trình viên ứng dụng trong việc làm đẹp và sinh động thêm cho website của mình. Hiện tại google có khoảng 629 font families, đủ để bạn lựa chọn font phù hợp cho chính website của mình.

Google Fonts hỗ trợ website 

Việc tạo ra một font chữ là việc đòi hỏi rất nhiều kiến thức, thời gian và chất xám. Do đó, các font chữ thường được thương mại hóa, nếu bạn sử dụng một font thương mại mà convert nó sang các định dạng khác nhau để dùng cho @font-face hoặc cúfont đều là hành động vi phạm bản quyền. Chính vì thế người ta tạo ra một dịch vụ có tên là web fonts, nơi cho bạn sử dụng các font chữ có bản quyền một cách có phí và miễn phí. Google font cũng đã phát triển một kho dữ liệu đồ sộ để phục vụ người dùng. 

Cách sử dụng Google fonts cho Web 

Cách áp dụng Web fonts vào website của bạn rất đa dạng, tùy thuộc vào các dịch vụ cung cấp mà chúng ta sẽ có cách áp dụng khác nhau. Và đặc điểm chính là nó sẽ quản lý fonts theo domain, tức khi đăng ký, bạn sẽ khai báo domain website của mình, nó xử lý mà thấy domain của bạn không đúng thì sẽ không cho sử dụng. 

Cũng khá rắc rối nhỉ? Tuy nhiên, google fonts phát triển nhanh như vậy cũng là có nguyên nhân. Cách sử dụng có nó rất đơn giản, chỉ việc click chọn, sao chép và sử dụng thôi, nó hoàn toàn miễn phí nên ta có thể áp dụng nó vào bất kỳ đâu mà ta muốn. 

Bước 1: Chúng ta sẽ vào website chính của google fonts http://www.google.com/fonts/. Hiện tại thì google có khoảng 629 font families, một con số cũng khá kiêm tốn. Không đặc sắc như các dịch vụ có phí khác, nhưng nó cũng vừa đủ để chúng ta áp dụng vào một website cá nhân hoặc thương mại rồi. 

Khi quan sát thì chúng ta thấy giao diện nó gồm 3 phần: 

• Tay trái: panel dùng để phân loại fonts 
• Tay phải: khu vực hiển thị chế độ xem trước cho các font chữ
• Bên dưới màn hình: Là khu vực các font đã được chọn để làm việc 

Sử dụng Google fonts 

Các bạn cũng phải lưu ý là muốn dùng tiếng Việt thì hãy nhìn bên panel phân loại, có filter là script, các bạn chọn ngôn ngữ hỗ trợ là Vietnamese chúng ta có khoãng 12 font families để sử dụng, hãy chọn loại font mà bạn muốn, sau đó nhấp vào nút “Add to Collection” để làm việc lúc đó thì panel bên dưới màng hình sẽ hiển thị cho chúng ta lựa chọn, các bạn chọn tiếp tab “Use” để qua phần áp dụng web fonts vào website. 

Bước 2: Giờ thì các bạn có thể lựa chọn các style của font như độ đậm, in nghiêng,…. Lưu ý: Càng lựa chọn nhiều thì website của chúng ta sẽ càng load lâu hơn đấy. Đặc biệt là đôi lúc nó load được hết các thành phần khác rồi, nhưng vẫn chưa hiển thị chữ. Đó là một nhược điểm của web fonts. Hãy cố gắng tối ưu bằng cách lựa chọn các font, nhưng đồng hồ “Page Load” vẫn ở mức màu xanh. 

Chọn màu chữ 

Bước 3: Đặc biệt quan trọng, ở mục “Choose the character sets you want:” bạn phải chọn nhóm ký tự “Vietnamese (vietnamese)” nếu không thì nó sẽ không hỗ trợ tiếng Việt đâu nhé. Muốn chắc ăn thì chọn thêm “Latin Extended (latin-ext)” nữa là ổn. 

Chọn hỗ trợ tiếng Việt 

Bây giờ chúng ta có 3 cách chèn vào website. Tuy nhiên, tôi vẫn khuyến khích các bạn dùng cách @im port hoặc Standard, vì đụng đến javascript thì bạn nào yếu sẽ khá phiền phức. 

+ Nếu dùng @im port thì copy đoạn code đó, đưa vào đầu tập tin css của chúng ta. 

+ Nếu dùng kiểu truyền thống Standard thì chỉ việc copy nó vào bên trong khu vực thẻ head là ổn.

Dùng cách @im port hoặc Standard chèn vào website

Ví dụ ở đây minhg dùng Standard cho Blog của mình

<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100,700|Open+Sans:300italic,400italic,600italic,700italic,800italic,400,800,700,600,300|Lobster&amp;subset=latin,vietnamese' rel='stylesheet' type='text/css'/>

 Bước 4: Chúng ta chỉ việc copy đoạn code font-family để áp dụng vào bất kỳ thẻ hoặc id, class nào trong css mà chúng ta muốn thôi. 

Google fonts apply 

Lưu ý: đoạn code do google đưa ra nhé. 

Đoạn code của google

Kết luận 

Google fonts thì rất hay, nhưng mà đối với Việt Nam mình thì nó cũng chẳng đặc sắc gì mấy, vì chúng chưa hỗ trợ được nhiều font tiếng Việt đẹp. Vấn đề bản quyền cũng là một phần nhức nhối. Vì vậy, bạn cần chọn lọc kỹ và lưu ý khi sử dụng các font này.