Tối ưu font tùy chỉnh với @font-face

@font-face rất hợp nếu bạn muốn tạo phong cách riêng cho trang, mặc dù hiện nay các font tùy chỉnh cho tiếng Việt vẫn hạn chế về tính ứng dụng thực tế, nhưng cũng đã khá hơn nhiều so với cách đây vài năm. Và nhìn chung đối với các văn bản ngắn bạn có rất nhiều lựa chọn.

Một nguồn miễn phí đáng tin cậy để tải các font tùy chỉnh hỗ trợ tốt tiếng Việt là Google Fonts. Bạn có thể sử dụng tính năng lọc ở trên cùng (ví dụ theo category) để nhanh chóng tìm ra font ưng ý.

Font chữ viết tay tôi thích nhất trên này là Mali.

OK, bây giờ chúng ta sẽ chuyển qua đoạn mã:

@font-face { /* font tùy chỉnh */
        font-family:"fontMali";
        src:url('fonts/mali-light.woff2') format('woff2'), 
        url('fonts/mali-light.woff') format('woff'), 
        url('fonts/mali-light.ttf') format('ttf'), 
        url('fonts/mali-light.otf') format('otf'),
        url('fonts/mali-light.eot?#iefix') format('embedded-opentype'),
        url('fonts/mali-light.svg#svgFontName') format('svg'); 
        font-display:swap;
 }
             
body {font-family: "fontMali", Arial, Helvetica, sans-serif; }

Giải thích từng phần:

• font-family:"fontMali" là tên bạn đặt cho font tùy chỉnh, bạn đặt nó thế nào cũng được, không nhất thiết phải giống với tên font mà bạn tải về máy;
• src:url('fonts/mali-light.woff2') là đường dẫn mà file font của bạn lưu. Thường thì chúng ta sẽ tạo một thư mục có tên là fonts để chứa các font cho website. Thư mục này nên cùng cấp với thư mục chứa file css, js cũng như html;
• .woff2 là định dạng font tối ưu nhất hiện nay vì nó nhẹ nhất trong khi các chức năng khác vẫn đảm bảo. Ở cấp độ toàn cầu, nó hiện được hơn 96% người dùng có thể sử dụng được, và tất cả các trình duyệt lớn đều hỗ trợ;
• url('fonts/mali-light.woff') format('woff') là định dạng font dự phòng để nhỡ trình duyệt không hỗ trợ woff2 thì dùng woff. Đây là định dạng được hơn 98% người dùng hỗ trợ;
• Tiếp đến là các định dạng khác như ttf, otf, eot và svg dành để hỗ trợ các trình duyệt quá cũ. Bạn có thể bỏ otf và svg đi cũng được, vì số lượng người dùng này quá nhỏ. ttf thì vẫn nên giữ lại, cho các phiên bản ie cũ;
• Cuối cùng ở phần font-display:swap chúng ta để vậy để tối ưu hiển thị. Trong lúc chờ font tùy chỉnh tải về, chữ vẫn hiện ra, nó tạm thời dùng font có trong máy người dùng. Font tùy chỉnh tải xong thì chuyển qua sử dụng font tùy chỉnh. Rất hữu ích khi tốc độ kết nối internet của người dùng không cao hoặc/và file font tùy chỉnh của bạn nặng. Nếu không dùng câu lệnh này thì font tùy chỉnh tải xong thì văn bản mới hiển thị ra với người dùng;
• Ở phần body, chúng ta vẫn để các font an toàn (safe web fonts) làm dự phòng, tránh trường hợp vì một lý do nào đó font tùy chỉnh không dùng được, tải được;

Làm thế nào để chuyển đổi định dạng font?

Ví dụ bạn chỉ có file font định dạng ttf, bạn có thể chuyển định dạng cho nó bằng các công cụ trục tuyến như https://cloudconvert.com/ttf-to-woff2, việc chuyển đổi rất đơn giản, nhanh và miễn phí.