Sử dụng font chữ mặc định của trình duyệt giúp website/blogspot Blogger tăng hơn 10% tốc độ load, theo cảm nhận của tôi thấy font mặc định của trình duyệt cũng đẹp vì cũng tròn tròn, gọn gọn, xinh xinh.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 font 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.
Tại sao bạn nên quan tâm đến web font HTML?
Không biết bạn biết không nhưng font HTML đóng vai trò quan trọng trên trang web. Nếu chọn đúng font có thể cải thiện thẩm mỹ tổng thể của trang và cho phép khách truy cập đọc nội dung dễ dàng hơn.
Nhưng nếu bạn bất cẩn chọn font chữ ngẫu nhiên và không phù hợp có thể tác động tiêu cực. Nó ảnh hưởng xấu đến tính thẩm mỹ tổng thể của trang và khả năng đọc được nội dung của người xem.
Hơn nữa, font web cũng có thể ảnh hưởng đến hiệu suất của trang, cả tích cực lẫn tiêu cực. Nó phụ thuộc bạn có chọn font an toàn cho web hay không. Chúng tôi sẽ thảo luận về vấn đề này sâu hơn sau nên bạn cứ tiếp tục đọc nhé.
Cách thay đổi web font thông qua code HTML?
Để thay đổi font HTML, bạn có thể sử dụng thuộc tính style trong thẻ <p> để xác định đoạn văn bản. Dưới đây là ví dụ:
Có 3 loại font trong ví dụ này – Courier, Arial, và Helvetica. Font thứ hai và thứ ba là bản sao lưu trong trường hợp font thứ nhất không được tìm thấy hoặc không được cài đặt đúng cách.
“Web Font an toàn” là gì?
Thuật ngữ này được sử dụng để mô tả font đã được cài đặt chung trên tất cả các thiết bị. Vì chúng được lưu trữ cục bộ, trang web của bạn sẽ tải nhanh hơn khi bạn sử dụng web font an toàn.
Điều này sẽ ảnh hưởng đến SEO vì tốc độ tải trang là một trong những yếu tố được tính khi xếp hạng trang trên SERP.
Đó là lý do tại sao chúng tôi khuyên bạn nên sử dụng web font an toàn – để đảm bảo người đọc có thể xem nội dung dễ dàng và hiệu suất của trang web không bị ảnh hưởng tiêu cực.
Hãy nhớ rằng có những lựa chọn thay thế cho web font an toàn, thường chung đặc điểm như kiểu chữ phổ biến. Ví dụ, font thay thế cho font Sans Serif như Helvetica là Acumin và Univers.
Nhưng không giống như các web font an toàn còn lại, font thay thế thường không có sẵn trên tất cả hệ điều hành. Mặc dù nói vậy, bạn vẫn muốn sử dụng một trong số đó vì có vẻ như font phổ biến thường bị lạm dụng. Chỉ cần nhớ là bạn cần hy sinh tốc độ trang web để đổi lấy.
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…
Làm như thế nào để sử dụng font chữ mặc định 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 file style.css đặt nó xuống cuối cùng file style.css
Phương pháp 1:
body{font-family: -apple-system, system-UI, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;}
Hoặc nến 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: mình đang sử dụng
body{font-family: sans-serif;}
Phương pháp 3: điện máy xanh đang sử dụng rất là hay
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 tuyệt vời.
Nếu tối ưu nhất bạn hãy vào file style.css tìm đến các lệnh font-family: thay đổi từng cái cũng được.
Ví dụ themes flatsome họ tích hợp sẵn font lato, bạn vào chỉnh sửa theo nhu cầu font mặc định của cá nhân bạn…
bạn hãy xóa google font được tích hợp mặc định trong themes website của bạn đi thì sẽ có 2 cách phổ biến:
một là sửa xóa trực tiếp thằng file themes nhưng nhược điểm là cái này cập nhật sẽ bị mất mà themes cha họ code google font chỗ nào nhiều bạn cũng không biết tìm để chỗ nào mua sửa mà còn sửa lỗi xóa nhiều cái không chính xác thì toang, hãy đến với cách 2 nhé.
Và cách 2 là thêm đoạn code này vào file functions.php của child themes rồi đưa đoạn code này vào:
add_action('template_redirect', 'wptangtoc_disable_google_fonts');
function wptangtoc_disable_google_fonts() {
ob_start('wptangtoc_disable_google_fonts_regex');
}
function wptangtoc_disable_google_fonts_regex($html) {
$html = preg_replace('/<link[^<>]*\/\/fonts\.(googleapis|google|gstatic)\.com[^<>]*>/i', '', $html);
return $html;
}
mình có làm video chia sẻ hướng dẫn cách chuyển đổi font chữ mặc định của trình duyệt bạn có thể tham
7 font chữ Google được sử dụng nhiều nhất
Font Roboto
Ở trạng thái bình thường (Regular), font chữ có độ rộng ký tự hơi mảnh (nhạt). Theo chúng tôi, đây là nhược điểm duy nhất và phải tăng kích thước font hoặc dùng độ đậm font để font cứng cáp hơn. Kích thước font áp dụng văn bản phù hợp là từ 15px đến 18px.
Font Noto Sans
Noto Sans tuy không phổ biến bằng Roboto, chỉ có khoảng 1.8 triệu website sử dụng nhưng lại là một font khá đẹp và hiển thị tương thích với hơn 30 ngôn ngữ (trong đó có tiếng Việt) cũng như nhiều nền tảng khác nhau.
Font Open Sans
Nếu không chú ý kỹ, thoạt nhìn bạn có thể thấy Open Sans hao hao giống Noto Sans chỉ với vài khác biệt nhỏ như font chữ Open Sans mảnh hơn 1 chút và chữ “g” có móc liền. Về độ phổ biến, Open Sans “ăn đứt” Noto Sans khi mà có đến 22 triệu website áp dụng font chữ này.
Font Arima Madurai
Với các đỉnh tròn tinh tế, font chữ Arima Madurai mang lại cho người đọc cảm giác mềm mại và nhẹ nhàng. Font chữ giống như kiểu viết tay của ai đó rất nắn nót, gọn gàng và có thể dùng làm đoạn văn bản hoặc tiêu đề/đề mục lớn trên giao diện Web.
Font IBM Plex Serif
Đây là 1 font chữ của IBM Plex nhằm kết nối tinh thần thương hiệu IBM và lịch sử để mô phỏng mối quan hệ hợp nhất giữa con người và máy tính.
Mặc dù chỉ có 7900 website sử dụng trên khắp thế giới, chủ yếu là tiếng Anh, Pháp và Việt nhưng font chữ này thật sự rất dễ đọc, độ tương phản cao và mang tính văn bản hàn lâm. Đo đó, sẽ không có gì bàn cãi khi nó được áp dụng font này trên các trang báo chí.
Font Noto Serif
Nếu bạn muốn áp dụng font chữ cho một website tin tức, bạn lại có 1 lựa chọn tuyệt vời nữa với font chữ Noto Serif. Với 1 số nét chữ giống Open Sans, Noto Serif có độ rộng ký tự hẹp hơn và có nhiều móc hơn, và có kích thước bé hơn một chút Open Sans nếu so cùng kích thước chữ mặc định.
Font Muli
Muli là font chữ Sans Serif được tối thiểu hóa với thiết kế dùng để hiển thị văn bản ở các trình duyệt web, desktop, laptop và các thiết bị mobile. Font Muli mang tính máy móc nhiều hơn khi nhà thiết kế loại bỏ hoàn toàn các đường cong và dấu móc.
Kết luận
Font chữ Google ngày càng nhận được những phản hồi tích cực nhờ sự đa dạng trong lựa chọn và dễ áp dụng trong quá trình chuyển đổi. Đây cũng là cách để các nhà làm web đa dạng hóa font chữ cho website để giúp các trang của họ thu hút được sự chú ý của khách hàng.
Leave a comment