7 Tháng 5, 2017 • Tác giả: Thịnh Nguyễn • Chuyên mục: Công cụ, NukeViet Themes, Templates Joomla, WordPress Themes

Sử dụng Google Font làm Font cho website của bạn

Trong quá trình thiết kế website chắc hẳn bạn sẽ gặp những website có những font chữ uốn lượn! Đó là do chủ đích của chủ sở hữu website muốn thiết kế như vậy và khiến cho người vẽ giao diện cũng phải chiều theo ý muốn.

Tuy nhiên có một điều là không phải bạn mang font dùng trong photoshops tức là từ bản vẽ ra áp dụng ngay được cho website của bạn mà bạn phải trải qua một số thủ thuật mới xử lý được.

Để khắc phục tình trạng đó Google đã cho ra mắt bộ Font dành cho website, hỗ trợ trên tất cả cá trình duyệt tại địa chỉ: https://fonts.google.com/. Với địa chỉ này đáng tin cậy cho bạn xài bất cứ lúc nào. Nhưng để sử dụng nó thì không phải ai cũng rành nó. Để sử dụng nó thì hôm nay Thịnh hướng dẫn các bạn tìm font trên đó cũng như thêm chúng vào website của bạn.

Lưu ý: Với Google Font bạn cần xác định website của bạn là ngôn ngữ nào để tìm kiếm font google hỗ trợ ngôn ngữ đó.

Sau đây mình hướng dẫn các bạn thao tác đối với việc sử dụng Font tiếng Việt.

  1. Đầu tiên bạn truy cập địa chỉ: https://fonts.google.com/

  2. Tiếp đến bạn tiến hành tìm kiếm Font mà Google hỗ trợ dành cho tiếng Việt.
    Bạn cần chọn đúng ngôn ngữ tiếng Việt
  3. Nó sẽ ra dánh cách font hỗ trợ và cả mẫu demo cùng tính năng chọn lấy font.
  4. Tiếp đến bạn bấm vào nút dấu cộng màu đỏ ở khu vực thêm mà ban muốn chọn để mở ra cửa sổ thông báo của Google Font kèm link nhúng.
  5. Nó sẽ hiển thị cửa sổ nhỏ bên dưới và bạn mở nó lên.
  6. Sau khi mở lên bạn có 2 phương án nhúng Google Font
    • Cách 1: nhúng vào trong thẻ <head> của mã html mở đầu của website.
    • Cách 2: nhúng trực tiếp vào trong file css

Cách 1: Chèn đường dẫn link Google Font vào trong cặp thẻ html <head>.

  1. Trong phần “STANDARD” như hình dưới bạn chọn phần khoanh đỏ tiếp theo, copy chúng
  2. Tiếp đến bạn mở file hiển thị phần mở đầu website tìm tới dòng mở đầu có lệnh <head> hoặc trước lệnh </head>
  3. Bạn dán đoạn mà bạn vừa copy vào đó.
  4. Trong file css bạn khai báo font-family như hình trên là nó sẽ tự hiểu lấy link Google Font và hiển thị font mới theo khai báo của bạn.

Cách 2:  nhúng trực tiếp vào trong file css

  1. Trong phần “@IMPORT” bạn chọn nó nó sẽ ra như hình sau.
  2. Tại đây bạn copy đoạn mã @import url(… như trong khoanh màu đỏ trên.
  3. Sau đó bạn dán nó vào đầu file style.css hoặc file .css bất kỳ miễn là file đó luôn được gọi ở bất kỳ trang nào của website.
  4. Tiếp đến trong css bạn khai báo font-family như hình trên nhưng là Google Font mà bạn chọn.

Ưu điểm của việc sử dụng link google font:

  • Tiếp kiệm thời gian ngồi viết code.
  • Font chuẩn.
  • Giảm số dòng lệnh viết khi nhúng Font cho web.

Nhược điểm:

  • Khi mạng kém chập trờn thì load link google font rất lâu dẫn đến bể website.
  • Phụ thuộc vào máy chủ bên Google cung cấp link font.
  • Tăng thời gian load site.

Đó là chia sẻ của mình, ở bài tiếp theo mình sẽ hướng dẫn các bạn về vấn đề dùng font riêng nhúng vào web thay vì dùng của bên thứ 3.

Tác giả: Thịnh Nguyễn

Chuyên gia chia sẻ kiến thức về lập trình, thiết kế web và tối ưu hệ thống server.

Chia sẻ bài viết này:
Facebook Twitter

0 bình luận

Để lại bình luận của bạn

Địa chỉ email của bạn sẽ không được công bố rộng rãi. Các trường bắt buộc được đánh dấu *

Bài viết liên quan

Hướng dẫn cách tra mã bưu chính zipcode chuẩn xác tới tận nơi bạn sinh sống

Mã bưu chính Zip/Postal code là một dãy số tùy theo quốc gia sử dụng nhưng đều được phân chia để tránh bị trùng lặp dùng để phân chia giá trị về địa lý để khi mua hàng hay đặt hàng mà website yêu cầu mã zip code xác thực thông tin bạn đến từ […]

Xem chi tiết →

Làm thế nào để hiểu được cách chia cột trong framework bootstrap

Framework bootstrap là một trong những framework được sử dụng nhiều trên các website. Nhưng tuy nhiên khi lập trình viên sử dụng nó và đặc biệt là người mới bắt đầu cũng như mới làm quen với framework này sẽ gặp không ít khó khăn và bỡ ngỡ bởi cách viết của bootstrap hoàn […]

Xem chi tiết →

Sử dụng Zopim Live Chat cho hệ thống hỗ trợ trực tuyến của website

Zopim Live Chat hay gọi nhanh là zopim là một trong những dịch vụ tạo live chat tốt nhất hiện nay dành cho các website chuyên về thương mại điện tử và dịch vụ. Với Zopim Live Chat bạn hoàn toàn có thể chủ động chát trực tiếp với khách hàng ngay trên website thông […]

Xem chi tiết →