Có bao nhiêu người trong số các bạn thực sự đã kiểm tra thiết kế trang web của mình trên các trình duyệt và máy tính khác nhau trước khi bạn khởi chạy trang web? Tôi cá một vài người trong số các bạn. Bạn có biết rằng những gì có vẻ tốt trên một hệ điều hành (ví dụ, Mac) thực sự có thể trông xấu trên một hệ điều hành khác, chẳng hạn như Windows? Lý do chính là vì các phông chữ được sử dụng trong hệ thống Mac không có sẵn trong hệ điều hành Windows. Phông chữ thay thế được sử dụng bởi máy tính (không có phông chữ) và điều này thực sự có thể làm hỏng thiết kế web của bạn. Cách tốt nhất để khắc phục điều này là sử dụng phông chữ web được hỗ trợ bởi hầu hết các trình duyệt, để trang web của bạn trông giống nhau bất kể trình duyệt hoặc máy tính bạn đang sử dụng.

Trong hội nghị phát triển I / O vào tháng 6 năm 2010, Google đã giới thiệu Google Font - một loạt phông chữ nguồn mở, mà bạn có thể nhúng và sử dụng trên trang web của mình. Tất cả các phông chữ được lưu trữ trên máy chủ của Google, vì vậy bất kỳ trình duyệt nào cũng có thể sử dụng phông chữ mà không cần nhiều nỗ lực. Hiện tại, có 18 phông chữ khác nhau (như bài viết này) mà bạn có thể lựa chọn và tôi chắc chắn sẽ có nhiều phông chữ được thêm vào thư viện trong tương lai.

Xem trước phông chữ

Ngoài Google Font, Google cũng đã phát hành trình xem trước phông chữ của Google cho phép bạn xem trước phông chữ trước khi nhúng nó vào trang web của bạn.

Việc sử dụng rất đơn giản. Bạn chỉ cần gõ vào một số văn bản tùy chỉnh, chơi xung quanh với các thiết lập (họ phông chữ, kích thước, biến thể, khoảng cách vv) để tìm phù hợp nhất cho trang web của bạn.

Một khi bạn đã hài lòng với kết quả, chỉ cần lấy mã và nhúng nó vào thiết kế trang web của bạn.

Nhúng Google Font vào trang WordPress của bạn

Nếu bạn đang sử dụng blog do WP cung cấp, dưới đây là cách bạn có thể nhúng và sử dụng phông chữ của Google trong trang web của mình.

Đi tới Google Font, tìm phông chữ yêu thích của bạn và lấy mã "Nhúng". Ví dụ:

Mở tệp “header.php” trong thư mục chủ đề đang hoạt động của bạn. Chèn mã trước thẻ.
Để sử dụng Google Font trên toàn bộ trang web, hãy mở tệp “style.css” của bạn từ thư mục chủ đề đang hoạt động và dán mã còn lại mà bạn đã lấy từ trang web Google Font.
 body {font-family: 'Cantarell', serif; kích thước phông chữ: 28px; font-style: bình thường; font-weight: 400; text-shadow: none; text-decoration: none; text-transform: none; khoảng cách chữ cái: 0em; khoảng cách từ: 0em; line-height: 1em; } 
Ngoài ra, bạn có thể thay đổi css cho phù hợp nếu bạn chỉ sử dụng nó cho một phần nhỏ của trang web của bạn. Ví dụ
 span.custom_font {font-family: 'Cantarell', serif; kích thước phông chữ: 28px; font-style: bình thường; font-weight: 400; } 
Lưu tệp header.php và style.css và tải chúng trở lại máy chủ của bạn. Nếu bạn đang sử dụng plugin bộ nhớ cache, đừng quên xóa bộ nhớ cache của mình.
Đó là nó. Hãy dùng thử và cho chúng tôi biết nếu nó phù hợp với bạn.
Tín dụng hình ảnh: til01