跳至主要内容

[Tailwind] 客製化-字型

Tailwind 預設字型​

在開始客製化字型設定前，先來看看Tailwind預設的字型設定吧！

設定名稱對應內容
font-sansfont-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-seriffont-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
font-monofont-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

客製化字型​

官方文件寫道，可以在tailwind.config.js內的theme撰寫fontFamily設定字體，範例如下：

tailwind.config.js
module.exports = {
  theme: {
    fontFamily: {
      'sans': ['ui-sans-serif', 'system-ui', ...],
      'serif': ['ui-serif', 'Georgia', ...],
      'mono': ['ui-monospace', 'SFMono-Regular', ...],
      'display': ['Oswald', ...],
      'body': ['"Open Sans"', ...],
    }
  }
}
字體名稱中間有空白該怎麼辦？

需要注意有些的字體中間會有空白，這時候除了’’以外，還需要在裡面額外再包一層””，才可以正確運作。例如'display': ['"Fredoka One"', 'cursive']

fontFamily的設定可以在theme中直接覆蓋預設設定，也可以如同colors一樣在extend內用擴充的方式去設定。
點我參考colors設定

使用google font​

我們很常使用google font的服務，如果想要在tailwind中使用google font的字體，有以下兩種方式

  1. 在每個頁面的head中撰寫google font css link
  2. 在main.css中使用@import的方式引入，並且使用@layer base的方式修改html下的全站設定

head內加入css:link​

index.html
<head>
  <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=Noto+Sans+TC:wght@100;700&display=swap" rel="stylesheet">
</head>

import搭配@layer base​

  1. google font複製@import的內容
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;700&display=swap');
  1. main.css內的設定如下
main.css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base{
  html{
    font-family:'font',cursive;
  }
}

在自己的字體設定後方加入tailwind預設的字體設定​

原理類似斷點設定中，擴充比sm更小的斷點，是使用展開運算符的方式加入預設的設定。設定如下：

tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

theme: {
  extend: {
    fontFamily: {
  	'display': ['"Fredoka One"', 'cursive', ...defaultTheme.fontFamily.sans]
    }
  }
}