/

如何在Tailwind CSS中使用自訂字體

如何在Tailwind CSS中使用自訂字體

假設你已經設定好了使用Tailwind CSS的應用程式，你將擁有一個包含以下內容的CSS檔案：

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;

你可以前往Google Fonts網站，選擇一個字體，並且會提供你一個用於匯入該字體的CSS @import。

舉個例子，如果你選擇了Inter字體以及各種字重，將會獲得以下的@import語句：

1
@import url('https://fonts.googleapis.com/css2?family=Inter:[[email protected]](/cdn-cgi/l/email-protection);200;300;400;500;700;900&display=swap');

將這段語句加入到CSS檔案中，並且再加上以下內容：

1
2
3
4
5
@layer base {
 html {
   font-family: Inter, system-ui, sans-serif;
 }
}

最終，你的CSS檔案會變成這樣：

1
2
3
4
5
6
7
8
9
10
11
@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Inter:[[email protected]](/cdn-cgi/l/email-protection);200;300;400;500;700;900&display=swap');

@layer base {
 html {
   font-family: Inter, system-ui, sans-serif;
 }
}

現在你的預設字體就是Inter字體了，你可以使用font-bold或者font-medium來設置不同大小的字體。

tags: [“Tailwind CSS”, “custom fonts”, “Google Fonts”, “CSS”, “front-end development”]