Các Phương Pháp Thêm Font Chữ Vào Website Hiệu Quả
Giao diện một website không chỉ được quyết định bởi màu sắc hay bố cục, mà còn phụ thuộc rất nhiều vào typography – nghệ thuật sử dụng và sắp xếp font chữ. Việc lựa chọn một font chữ đẹp, phù hợp với thương hiệu không chỉ giúp tăng tính thẩm mỹ mà còn cải thiện trải nghiệm đọc của người dùng.
Các Phương Pháp Thêm Font Chữ Vào Website Hiệu Quả
Trong bài viết này, chúng ta sẽ cùng nhau khám phá hai phương pháp phổ biến và hiệu quả nhất để nhúng một font chữ tùy chỉnh vào trang web của bạn: tự host font chữ với quy tắc @font-face của CSS và sử dụng các dịch vụ font trực tuyến như Google Fonts.
Phương Pháp 1: Tự Host Font Chữ với @font-face
Đây là phương pháp truyền thống và mang lại cho bạn sự kiểm soát tối đa. Về cơ bản, bạn sẽ tải các tệp font chữ lên chính hosting/server của mình và dùng CSS để “gọi” chúng ra khi website được tải.
Bước 1: Tìm hiểu các định dạng Font chữ Web
Trước khi bắt đầu, điều quan trọng là phải hiểu các định dạng tệp font chữ khác nhau, vì mỗi trình duyệt có thể hỗ trợ các định dạng khác nhau.
- WOFF (Web Open Font Format): Đây là định dạng được tạo ra chuyên cho web. Nó thực chất là font TrueType (TTF) hoặc OpenType (OTF) đã được nén lại để giảm dung lượng, giúp trang web tải nhanh hơn. Được hỗ trợ bởi hầu hết các trình duyệt hiện đại.
- WOFF2 (Web Open Font Format 2.0): Là phiên bản kế nhiệm của WOFF, mang lại khả năng nén tốt hơn đáng kể (giảm dung lượng tới 30%). Đây là định dạng được ưu tiên hàng đầu cho các trình duyệt mới nhất.
- TrueType (TTF) & OpenType (OTF): Đây là những định dạng font rất phổ biến trên các hệ điều hành máy tính (Windows, macOS). Mặc dù trình duyệt có thể đọc được, chúng thường có dung lượng lớn hơn WOFF/WOFF2. Bạn nên sử dụng chúng như một phương án dự phòng.
- EOT (Embedded OpenType): Một định dạng cũ của Microsoft, chủ yếu để hỗ trợ các phiên bản Internet Explorer cũ (IE6-IE8). Ngày nay, định dạng này gần như không còn cần thiết.
Khuyến nghị: Để đảm bảo tương thích tốt nhất và hiệu suất tối ưu, bạn nên sử dụng WOFF2 và có thêm WOFF làm phương án dự phòng.
Bước 2: Khai báo Font chữ trong CSS – Các Phương Pháp Thêm Font Chữ Vào Website Hiệu Quả
Sau khi đã có các tệp font, bạn hãy tải chúng lên một thư mục trên hosting của mình (ví dụ: your-website.com/assets/fonts/). Tiếp theo, hãy sử dụng quy tắc @font-face trong tệp CSS để khai báo chúng.
Quy tắc này giống như việc bạn đăng ký một font chữ mới với trình duyệt.
CSS
@font-face {
/* Đặt tên cho font chữ của bạn. Tên này sẽ được dùng trong các thuộc tính CSS khác. */
font-family: 'MyCustomFont';
/* Đường dẫn đến tệp font. Trình duyệt sẽ thử từng đường dẫn từ trên xuống. */
src: url('/assets/fonts/my-custom-font.woff2') format('woff2'),
url('/assets/fonts/my-custom-font.woff') format('woff');
/* Các thuộc tính tùy chọn khác */
font-weight: normal; /* hoặc 400 */
font-style: normal;
font-display: swap; /* Giúp văn bản hiển thị nhanh hơn với font hệ thống trong lúc chờ font tùy chỉnh tải xong */
}
Bước 3: Áp dụng Font chữ cho các thành phần HTML
Một khi đã khai báo, việc sử dụng font chữ mới của bạn vô cùng đơn giản. Chỉ cần gọi tên mà bạn đã đặt trong font-family ở bước trên.
CSS
body {
font-family: 'MyCustomFont', sans-serif; /* sans-serif là font dự phòng nếu MyCustomFont lỗi */
}
h1, h2, h3 {
font-family: 'MyCustomFont', serif;
}
Bước 4: Thêm các biến thể (In đậm, In nghiêng)
Một font chữ thường có nhiều biến thể như in đậm (bold) hoặc in nghiêng (italic). Để sử dụng chúng, bạn cần khai báo một quy tắc @font-face riêng cho mỗi biến thể, nhưng vẫn giữ nguyên font-family.
CSS
/* Khai báo cho font chữ kiểu thường */
@font-face {
font-family: 'MyCustomFont';
src: url('/assets/fonts/my-custom-font-regular.woff2') format('woff2');
font-weight: 400; /* 400 tương đương với 'normal' */
font-style: normal;
}
/* Khai báo cho font chữ kiểu in đậm */
@font-face {
font-family: 'MyCustomFont';
src: url('/assets/fonts/my-custom-font-bold.woff2') format('woff2');
font-weight: 700; /* 700 tương đương với 'bold' */
font-style: normal;
}
Giờ đây, khi bạn áp dụng font-weight: bold; hoặc font-weight: 700; cho một phần tử, trình duyệt sẽ tự động tìm và sử dụng tệp font my-custom-font-bold.woff2 mà bạn đã khai báo.
CSS
.card-title {
font-family: 'MyCustomFont', sans-serif;
font-weight: bold; /* Trình duyệt sẽ áp dụng font in đậm */
}
Phương Pháp 2: Sử dụng Dịch vụ Google Fonts (Khuyến nghị cho người mới bắt đầu)
Đây là cách đơn giản, nhanh chóng và được tối ưu hóa nhất hiện nay. Google Fonts cung cấp một thư viện khổng lồ các font chữ miễn phí, được tối ưu sẵn và phân phối qua mạng lưới máy chủ toàn cầu (CDN) của Google, giúp font tải cực nhanh dù người dùng ở bất cứ đâu.
Các bước thực hiện:
- Truy cập Google Fonts: Vào trang https://fonts.google.com/.
- Chọn Font: Duyệt và tìm kiếm font chữ bạn yêu thích (có thể lọc theo ngôn ngữ để chọn các font hỗ trợ tiếng Việt).
- Chọn Kiểu và Biến thể: Khi đã chọn được font, nhấn vào nó. Tại đây, bạn có thể chọn các kiểu bạn muốn dùng (ví dụ: Regular 400, Medium 500, Bold 700). Lưu ý: Chỉ chọn những kiểu bạn thực sự cần để không làm chậm website.
- Lấy mã nhúng: Ở khung “Selected family” bên phải, bạn sẽ thấy hai tùy chọn để nhúng:
<link>và@import.
- Phương pháp
<link>(Khuyến nghị): Sao chép thẻ<link>được cung cấp.- Dán vào HTML: Dán đoạn mã này vào bên trong cặp thẻ
<head>...</head>của tệp HTML hoặc trong fileheader.phpcủa theme WordPress.HTML
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Trang web của tôi</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head>- Sử dụng trong CSS: Google Fonts cũng cung cấp sẵn quy tắc CSS để bạn sao chép và dán vào tệp stylesheet của mình.
CSS
body { font-family: 'Roboto', sans-serif; }
Kết Luận
Việc thêm font chữ tùy chỉnh là một kỹ thuật quan trọng giúp nâng tầm thiết kế website của bạn.
- Sử dụng Google Fonts là lựa chọn lý tưởng cho hầu hết các dự án vì sự đơn giản, hiệu suất cao và thư viện phong phú.
- Tự host với
@font-facemang lại sự linh hoạt tối đa, phù hợp khi bạn cần sử dụng một font chữ độc quyền hoặc muốn toàn quyền kiểm soát các tệp tài nguyên của mình.
Dù chọn phương pháp nào, hãy luôn chú ý đến hiệu suất bằng cách chỉ tải những biến thể font thực sự cần thiết. Chúc bạn thành công trong việc tạo ra những giao diện web đẹp mắt và độc đáo!
