Nguyên nhân:
Các file font Montserrat được lưu trữ local dưới dạng các file nhỏ (subset) được chia tách:
montserrat-latin-400-normal.woff2 (chỉ chứa các ký tự Latin cơ bản không dấu: a, b, c, d...)
montserrat-vietnamese-400-normal.woff2 (chỉ chứa các ký tự tiếng Việt đặc thù có dấu và chữ Đ).
Trước đó, trong
app.css
khai báo gộp cả hai file woff2 này vào chung một khối @font-face mà không định nghĩa dải ký tự (unicode-range):
css
/* Khai báo cũ */
src: url('../fonts/montserrat-vietnamese-400-normal.woff2') format('woff2'),
url('../fonts/montserrat-latin-400-normal.woff2') format('woff2');
Với cú pháp này, trình duyệt chỉ tải file đầu tiên nó hiểu (file vietnamese.woff2). File này chỉ có các ký tự tiếng Việt đặc thù (á, à, ả, ể, ụ...) mà không có các ký tự latin cơ bản (a, b, c...). Kết quả là:
Các ký tự không dấu (a, b, c...) không tìm thấy trong file font nên trình duyệt phải dùng font mặc định của hệ thống (như Times New Roman hoặc Arial).
Các ký tự có dấu (á, à, ể...) thì được tải từ file vietnamese.woff2 nên hiển thị bằng font Montserrat. => Chữ bị bể, lệch, chữ to chữ nhỏ không đồng đều.
Giải pháp khắc phục:
cấu hình lại các khối @font-face trong
Theo chuẩn Google Fonts: Tách biệt hoàn toàn phần vietnamese và latin kèm theo dải mã ký tự unicode-range tương ứng cho mỗi trọng số (300, 400, 600, 700).
Ví dụ đối với trọng số 400:
css
/* montserrat-regular (400) (vietnamese) */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/montserrat-vietnamese-400-normal.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* montserrat-regular (400) (latin) */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/montserrat-latin-400-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Bằng cách này, khi render một chữ tiếng Việt (ví dụ: Tuyển dụng), trình duyệt sẽ nhận biết các ký tự Latin cơ bản và các ký tự có dấu đặc thù để tự động tải cả hai file font và kết hợp chúng lại một cách hoàn hảo.