Google Fonts là một dịch vụ cung cấp font chữ miễn phí để sử dụng trên website.
Tailwind CSS là một framework CSS theo hướng utility-first dùng để xây dựng các website hiện đại.
Dưới đây là 3 cách để sử dụng Google Fonts trong Tailwind CSS 4.
Trước tiên: Kết nối Google Fonts vào HTML
Trước khi đi vào cách sử dụng, hãy đảm bảo rằng bạn đã liên kết font chữ từ Google Fonts vào file HTML:
<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=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
Hoặc nếu dùng trong file CSS, bạn có thể thêm:
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
3 Cách sử dụng Google Fonts trong Tailwind CSS 4
1. Sử dụng giá trị tuỳ ý (Arbitrary Values)
Bạn có thể dùng cú pháp font-[font_name] để áp dụng font từ Google Fonts:
<h1 class="font-[Raleway]">Raleway</h1>
2. Sử dụng biến chủ đề (Theme Variables)
Bạn có thể định nghĩa biến font trong phần @theme như sau:
@theme { --font-raleway: "Raleway", "sans-serif"; }
Cách sử dụng:
<h1 class="font-raleway">Raleway</h1>
3. Đặt làm Font mặc định
Bạn có thể mở rộng biến --font-sans trong @theme để sử dụng font làm mặc định:
@theme { --font-sans: "Raleway", "sans-serif"; }
Cách sử dụng:
<h1>Raleway</h1>
Vậy là xong! Bạn đã biết 3 cách để sử dụng Google Fonts trong Tailwind CSS 4. Hy vọng bài viết hữu ích! Nếu bạn có câu hỏi hoặc muốn thảo luận thêm, hãy để lại bình luận bên dưới nhé.