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

@tailwind base;
@tailwind components;
@tailwind utilities;

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

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

@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檔案中,並且再加上以下內容:

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

最終,你的CSS檔案會變成這樣:

@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來設置不同大小的字體。