Cách Thêm Google Font Cho Website

Cách Thêm Google Font Cho Website


Ngày 1 Tháng 11 Năm 2021

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách thêm Google font vào cho website nha.

Google Font Là Gì?

Google Fonts (trước đây gọi là Google Web Fonts) là một thư viện dịch vụ nhúng phông chữ. Điều này bao gồm các họ phông chữ mã nguồn mở và miễn phí, một thư mục web tương tác để duyệt thư viện và các API để sử dụng các phông chữ thông qua CSS và Android. Các phông chữ phổ biến trong thư viện Phông chữ của Google bao gồm Roboto, Open Sans, Lato, Oswald, Montserrat, Source Sans Pro và Raleway... Đặc biệt nó hoàn toàn miễn phí và có thể sử dụng cho cả project phi lợi nhuận hoặc thương mại. Nếu bạn muốn tìm hiểu thêm về Google Font thì truy cập ở đây nha.

Cách Thêm Google Font Vào Trong Website

Bước đầu tiên chúng ta sẽ cần truy cập trang Google Font ở đường dẫn sau đây: Google Font

Website Google Font

Tiếp theo mình sẽ chọn font mình yêu thích bằng cách chọn vào font đó và chọn dựa vào các yếu tố thiết kế website mà chúng ta sẽ chọn các loại style của font như in nghiêng, in đậm... Để hiểu rõ hơn bạn xem video dưới đây nha.

Tiếp theo chúng ta sẽ chọn đường dẫn được generator và nhúng nó vào thẻ head trong trang HTML thông qua đoạn code dưới đay nha:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Thêm Google Font Vào Website</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,[email protected],400;0,500;1,400&display=swap" rel="stylesheet">
</head>
<body>
  <h1>Niềm Vui Lập Trình</h1>
</body>
</html>

Bước cuối cùng bạn chỉ cần sử dụng font-family để gọi font mà mình đã nhúng vào website.

body{
  font-family: 'Roboto', sans-serif;
}

Và kết quả bạn có thể xem hình ảnh ở dưới đây nha.

Website Google Font

Còn dưới đây là dự án trên Codepen nha.

See the Pen embed Google Font by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ngoài ra mình có một lưu ý là chúng ta cũng có thể import Google Font thông qua CSS bằng đoạn code dưới đây:

@import url('https://fonts.googleapis.com/css2?
family=Roboto:ital,[email protected],400;0,500;1,400&display=swap');
body{
  font-family: 'Roboto', sans-serif;
}

Nếu bạn muốn tham khảo thêm các Font Google đẹp mắt cho website thì hãy truy cập ở đây nhé.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp cho bạn cách thêm Google Font cho website và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!