Khi bạn tạo một blog/web chắc không thể bỏ qua việc lựa chọn một phông chữ đẹp, mà lựa chọn quen thuộc nhất là sử dụng font google.
Tuy là của google thì trình duyệt cũng cần thời gian tải vì là font của bên thứ 3. Ưu điểm font của bên thứ 3 là cho ta nhiều lựa chọn nhưng tốc độ load đối với tìm kiếm google thì không nhiều lựa chọn.
Vậy tại sao bạn không dùng luôn phông chữ mặc định của trình duyệt cho web/blog của mình. Font mặc định của trình duyệt cũng đẹp có khi nhìn còn thoáng hơn font Roboto.... mà tốc độ tải không cần lo tối ưu vì nó có sẵn.
Mà nhìn chung khi khách truy cập web/blog chả mấy ai quan tâm tới font chữ của bạn mà họ chỉ quan tâm cái họ cần tìm, nếu đẹp chắc chỉ giúp bạn tự sướng là chính.
Có 3 cách để sử dụng font chữ trên website.
- Google font tài nguyên bên thứ 3
- Lưu trữ font chữ tại host
- Font chữ mặc định của trình duyệt
Ưu nhược điểm của các loại font chữ trên
Font chữ google, đây là cách nhiều người sử dụng nhấtƯu điểm:
Dễ dàng cài đặt nên rất nhiều người sử dụng vì dễ tùy biến, nếu dùng WP sẽ giảm được một chút tài nguyên sử dụng webhost của bạn.
Nhược điểm:
Load không cache được, làm chậm website. Tối ưu không tối sẽ bị giật font chữ gây khó chịu cho người dùng.
Font chữ lưu chữ tại webhost
Ưu điểm :
Cache được load nhanh hơn font chữ dùng google font. Dễ dàng chỉnh sửa tối ưu hơn.
Nhược điểm:
Tốn tài nguyên webhost.
Font chữ mặc định của trình duyệt
Là cách tốt nhất giúp tăng tốc độ load website nếu bạn là người không đòi hỏi nhu cầu về font chữ.
Ưu điểm khi sử dụng font chữ mặc định trình duyệt:
- Phông chữ nhanh nhất, là phông chữ mà bạn không bao giờ phải đưa ra yêu cầu.
- Trong quá khứ, đó là những phông chữ an toàn cho web phổ biến như Arial, Verdana và Georgia. Phông chữ cuối cùng được chỉ định trong ngăn xếp phông chữ là phông chữ mặc định sans-serif hoặc serif.
- Phông chữ System-UI là tốt nhất và cũng dễ đọc trên màn hình di động smartphone.
Đây là các cài đặt phông chữ mặc định trong các các trình duyệt web như chrome, cốc cốc, filefox… Các chủ đề như chủ đề Twenty-nineteen mặc định của WordPress hoặc GeneratePress hoặc Astra. Họ sử dụng thủ thuật mã hóa ngăn xếp phông chữ Cascading Style Sheet (CSS).
Để có tốc độ load tốt nhất hãy biết cách chấp nhận. Hy sinh các phông chữ tùy chỉnh ưa thích và thay vào đó sử dụng phông chữ hệ thống load ngay lập tức.
Khi bạn sử dụng font chữ mặc định của trình duyệt bạn không cần phải quan tâm tối ưu làm sao, preconnect, preload thế nào, font-display: swap; có hợp lý không…
Cách cài đặt phông chữ mặc định của trình duyệt
Bạn dùng css để khai báo sử dụng font chữ mặc định của trình duyệt cho vào mẫu và chỉ cần khai báo 1 lần cho font-body là xong.Phương pháp 1:
body{font-family: -apple-system, system-UI, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;}
Nếu theme của bạn bị chặn chuyển đổi font chữ.
body{font-family: -apple-system, system-UI, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important}
Phương pháp 2:
body{font-family:sans-serif;}
Phương pháp 3:
body{font-family: Arial,Helvetica,sans-serif;}
Bạn dùng phương pháp nào cũng được tùy vào sở thích của bạn, đây là các kiểu sử dụng font chữ mặc định của trình duyệt rất dễ chấp nhận.