Hướng dẫn thêm font tùy chỉnh trong Tailwind CSS
Fonts là một trong những cách đơn giản nhất để tạo nên sự khác biệt cho dự án của bạn. Với Tailwind CSS, bạn có thể thêm font tùy chỉnh chỉ trong vài bước đơn giản.
Trong hướng dẫn này, chúng ta sẽ sử dụng font Poppins và đi qua ba phương pháp dễ dàng:
- Sử dụng Google Fonts
- Sử dụng font cục bộ với
@font-face - **Sử dụng font biến thể (
.ttf/.woff2)
Cuối cùng, chúng ta sẽ xem một phương pháp hiện đại với việc sử dụng @theme và biến CSS.
1. Sử dụng Google Fonts
Phương pháp nhanh nhất là tải trực tiếp từ Google Fonts.
Bước 1: Nhập font
Truy cập Google Fonts, chọn Poppins, và sao chép liên kết nhập. Thêm nó vào globals.css (hoặc stylesheet chính của bạn):
css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;900&display=swap');Bước 2: Cập nhật cấu hình Tailwind
javascript
export default {
theme: {
extend: {
fontFamily: {
sans: ['Poppins', 'sans-serif'],
},
},
},
};Bước 3: Sử dụng font
html
<h1 class="font-sans text-3xl font-bold">Xin chào với Poppins!</h1>✅ Chỉ cần như vậy. Rất nhanh chóng.
2. Sử dụng font cục bộ với @font-face
Nếu bạn muốn tự lưu trữ font (kiểm soát tốt hơn, offline, lý do cấp phép), hãy sử dụng @font-face.
Bước 1: Đặt tệp font
Tải xuống Poppins Regular và Bold, sau đó đặt chúng vào:
plaintext
/public/fonts/Poppins-Regular.woff2
/public/fonts/Poppins-Bold.woff2Bước 2: Thêm @font-face
Trong globals.css:
css
@font-face {
font-family: 'Poppins';
src: url('/fonts/Poppins-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Poppins';
src: url('/fonts/Poppins-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}Bước 3: Cập nhật cấu hình Tailwind
javascript
export default {
theme: {
extend: {
fontFamily: {
sans: ['Poppins', 'sans-serif'],
},
},
},
};Bước 4: Sử dụng font
html
<p class="font-sans text-lg">Bây giờ đang chạy font Poppins tự lưu trữ!</p>3. Sử dụng font biến thể (.ttf / .woff2)
Font biến thể cho phép bạn sử dụng một tệp cho tất cả các trọng số thay vì tải xuống nhiều tệp.
Bước 1: Đặt font biến thể
Ví dụ:
plaintext
/public/fonts/Poppins-Variable.woff2Bước 2: Thêm @font-face
css
@font-face {
font-family: 'PoppinsVariable';
src: url('/fonts/Poppins-Variable.woff2') format('woff2');
font-weight: 100 900; /* bao gồm tất cả các trọng số */
font-style: normal;
}Bước 3: Cập nhật cấu hình Tailwind
javascript
export default {
theme: {
extend: {
fontFamily: {
variable: ['PoppinsVariable', 'sans-serif'],
},
},
},
};Bước 4: Sử dụng font
html
<h1 class="font-variable font-extralight text-2xl">Mỏng</h1>
<h1 class="font-variable font-bold text-2xl">Đậm</h1>
<h1 class="font-variable font-black text-2xl">Đen</h1>✔️ Một tệp → tất cả trọng số. Gọn gàng hơn rất nhiều.
4. Bonus: Sử dụng @theme và biến CSS
Với @theme mới của Tailwind, bạn có thể định nghĩa các token font dưới dạng biến CSS.
Bước 1: Định nghĩa trong CSS
css
@theme {
--font-poppins: "Poppins", "sans-serif";
}Bước 2: Sử dụng trong HTML
html
<h1 class="font-[var(--font-poppins)] text-4xl font-bold">
Tiêu đề bằng Poppins
</h1>👉 Phương pháp này rất tốt cho các dự án thương hiệu với nhiều font, vì bạn chỉ cần cập nhật ở một nơi. Rất đáng để sử dụng bước này.
Nên chọn phương pháp nào?
- ✅ Nhập từ Google Fonts → Tốt nhất cho các thiết lập nhanh và nguyên mẫu
- ✅ Font cục bộ (
@font-face) → Tốt nhất cho các ứng dụng sản xuất hoặc khi bạn muốn kiểm soát hoàn toàn - ✅ Font biến thể → Tốt nhất cho hiệu suất và tính linh hoạt (một tệp, tất cả trọng số)
- ✅ Biến
@theme→ Tốt nhất cho các thiết lập hiện đại, có thể mở rộng
Thực hành tốt nhất
- Chọn font phù hợp với thiết kế và thương hiệu của bạn.
- Kiểm tra khả năng tương thích trên các trình duyệt khác nhau.
Những cạm bẫy thường gặp
- Quên thêm font vào cấu hình Tailwind.
- Sử dụng nhiều tệp font cho các trọng số khác nhau có thể làm tăng khối lượng tải.
Mẹo hiệu suất
- Sử dụng font biến thể để giảm số lượng tệp tải xuống.
- Tối ưu hóa kích thước font trước khi tải lên máy chủ.
Xử lý sự cố
- Nếu font không hiển thị, kiểm tra đường dẫn và cấu hình.
- Đảm bảo rằng font đã được tải xuống và có sẵn trong dự án của bạn.
Câu hỏi thường gặp
- Có thể sử dụng nhiều font không?
- Có, bạn có thể thêm nhiều font bằng cách định nghĩa chúng trong cấu hình Tailwind.
- Font biến thể có tốt hơn không?
- Có, chúng giúp giảm số lượng tệp cần tải, tối ưu hóa hiệu suất.
Kết luận
Việc thêm font tùy chỉnh vào dự án Tailwind CSS của bạn không chỉ giúp nâng cao trải nghiệm người dùng mà còn làm cho sản phẩm của bạn trở nên độc đáo hơn. Hãy thử các phương pháp trên và tìm ra cách nào phù hợp nhất với nhu cầu của bạn. Đừng quên áp dụng các thực hành tốt nhất để tối ưu hóa dự án của bạn!
