Google Fonts là một công cụ mạnh mẽ và dễ sử dụng, cung cấp hàng trăm kiểu chữ miễn phí cho các dự án thiết kế web và đồ họa. Việc sử dụng Google Fonts không chỉ giúp nâng cao tính thẩm mỹ của trang web mà còn cải thiện trải nghiệm người dùng với các lựa chọn font chữ đa dạng, dễ đọc và tối ưu hóa hiệu suất tải trang.
Trong bài viết này, tinhocvanphong.com.vn sẽ hướng dẫn bạn cách lựa chọn, tích hợp và tùy chỉnh font chữ từ Google Fonts để phù hợp với mục đích thiết kế của bạn.
1. Google Fonts là gì?
Google Fonts (gg font) là một thư viện gồm hàng trăm phông chữ nguồn mở và miễn phí có thể được sử dụng trong web và các dự án. Được ra mắt vào năm 2010 với tên Google Web Fonts. Dịch vụ này do Google cung cấp cho phép các nhà thiết kế và nhà phát triển dễ dàng kết hợp nhiều kiểu chữ khác nhau vào trang web hoặc ứng dụng di động của họ bằng API hoặc các phương pháp CSS truyền thống. Google Fonts thúc đẩy khả năng truy cập tốt hơn và tính nhất quán về kiểu chữ trên toàn bộ web, cho phép tạo ra các giao diện người dùng hấp dẫn và dễ đọc.
>> Cách sửa lỗi font chữ trong Word khi tải về
2. Cách sử dụng Google Fonts?
Bước 1:
Google cung cấp cho chúng ta nhiều phông chữ khác nhau để sử dụng. Để chọn phông thì đầu tiên bạn hãy truy cập trang chủ của Google Fonts. Ở trang này chúng ta sẽ thấy rất nhiều Font để lựa chọn.
Nếu lựa chọn theme nào các bạn chỉ cần click vào để tham khảo. Ở đây mình sẽ ví dụ là sử dụng Font Roboto vì mẫu font này rất phù hợp với tiếng Việt và hỗ trợ tất cả các ký tự trong bảng chữ cái tiếng Việt của chúng ta.
và lựa chọn thêm nhiều kích cỡ khác:
Bước 2:
Lựa chọn GET FONT ở góc phải bên trên cùng màn hình >> lựa chọn Get embed code
Bước 3:
Chúng ta chỉ việc Coppy và sử dụng là xong.
Tips:
Ngoài ra tuỳ từng Fonts mà sẽ có hỗ trợ tiếng Việt hay không? thì sẽ có những Fonts không hỗ trợ tiếng Việt, hoặc ngược lại. Để kiểm tra chúng ta có thể làm như sau:
Lựa chọn phần Search For Language >> Lựa chọn ngôn ngữ mà chúng ta cần. Sau đó GET FONT lại và lấy mã code. Ở đây mã code sẽ giúp chúng ta hỗ trợ được tiếng Việt để sử dụng.
Ví dụ đây là 1 đoạn Code đã được Update thêm tiếng Việt:
<link href=”https://fonts.googleapis.com/css?family=Roboto&subset=vietnamese” rel=”stylesheet”>
Mở tập tin home.html và dán vào bên trong thẻ <head> ở vị trí ngay trước thẻ <link> dùng nhúng tập tin main.css như hình dưới đây:
…
<head>
…
<link href=”https://fonts.googleapis.com/css?family=Roboto&subset=vietnamese” rel=”stylesheet”>
<link rel=”stylesheet” href=”stylesheets/main.css”>
</head>
…
Thực hiện thao tác trên với các tập tin contact.html và about.html.
Để sử dụng phông mới này bạn cần sao chép đoạn code trong tab EMBED nằm dưới mục Specify in CSS như trong hình phía dưới đây:
Các bạn vào tập tin main.css dán vào bên trong đoạn code áp dụng cho phần tử body:
body { font-family: ‘Roboto’, sans-serif; }
>> Cách sửa lỗi font chữ trong wps office?
3. Cuối cùng:
Trên đây là bài viết của mình về : Hướng dẫn cách sử dụng Google Fonts? qua đây các bạn có thể thấy rằng việc sử dụng gg font hết sức dễ dàng và nhanh chóng chỉ với một vài thao tác đơn giản. Chúc các bạn thành công với các hướng dẫn trên của mình.