Dùng Fonts chữ Google tiếng việt cho thiết kế website

Khi thiết kế giao diện Webite, Ngoài các font chữ truyền thống, phổ biến và quen thuộc như: Time new roman, Arial, Helvetica,… Thì có rất nhiều Font chữ khác đẹp và lạ hơn rất nhiều mà Google làm ra dành cho web và cung cấp miễn phí cho người dùng. Việc duy nhất của bạn cần làm đó là chọn và nhúng vào trang

Chọn Fonts chữ Google ở đâu?

Bạn có thể kích vào đường dẫn: Fonts chữ Google dành cho tiếng việt để lựa chọn ra font chữ mình cần nhúng:

Tại đây bạn chỉ cần chọn font chữ cần dùng và kiểu của font chữ như kích thước, in đậm, in nghiêng,… và Google cũng cung cấp luôn cho bạn giao diện demo trực quan về font chữ mà bạn muốn dùng.

Lựa chọn fonts chữ google tiếng việt

Lựa chọn fonts chữ google tiếng việt

Nhúng fonts chữ Google vào website

Sau khi bạn chọn xong fonts chữ thì bên dưới chân trang sẽ có 1 box là “Family Selected” bạn kích vào để mở box đó ra Google sẽ cung cấp cho bạn mã để nhúng vào trong trang như ảnh sau:

Nhúng fonts chữ Google vào website

Nhúng fonts chữ Google vào website

Tại mục EMBED cung cấp cho bạn 2 kiểu để nhúng vào website bạn chủ cần copy dòng lệnh đó và nhúng vào trong phần thẻ <head> của website như sau:

<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
  </head>
  <body></body>
</html>

Nếu bạn muốn tùy chỉnh thêm cho fonts chữ bạn đã chọn ở trên bạn chỉ cần nhấn vào phần CUTOMIZE để tùy chỉnh

Tùy chỉnh Fonts chữ Google đã chọn

Tùy chỉnh Fonts chữ Google đã chọn

Dùng font chữ Google cho website

Nếu muốn áp dung font chữ vừa nhúng vào cho website bạn chỉ cần khai báo cho phần tử đó với thuộc tính font-family như phần “Special in CSS” ở trên ảnh là dc.

Ví dụ: áp dung font chữ cho các thẻ <a>, H1, H2, các thẻ có class “demo-font-chu” ta khai báo như sau.

a, H1, H2, .demo-font-chu {
  font-family: 'Roboto', sans-serif;
}

Leave a Reply