找到你要的字體

到Google Fonts 官網尋找你要的字體

下載該字體的安裝包並解壓縮

觀察檔名

這裡拿來示範的是Quicksand這個字體

解壓縮之後

字體檔的副檔名應該是.ttf, .otf或.ttc

而檔名的命名規則是”字體家族名稱-粗細“

ex. Quicksand-Bold.ttf

新建資料夾並移動資料

在Flutter專案的根目錄中

新建名為fonts的資料夾

並把剛剛解壓縮裡面的字體檔放進fonts內

修改pubspec.yaml

把剛剛放進來的所有字體檔都加到pubspec.yaml中flutter底下的的fonts

ex.

1
2
3
4
5
6
7
8
9
10
11
12
13
flutter:

  # ...

  fonts:
  - family: Quicksand   #這裡填字體家族名稱
    fonts:
    - asset: fonts/Quicksand-Bold.ttf
    - asset: fonts/Quicksand-Light.ttf
    - asset: fonts/Quicksand-Medium.ttf
    - asset: fonts/Quicksand-Regular.ttf
    - asset: fonts/Quicksand-SemiBold.ttf
    - asset: fonts/Quicksand-VariableFont_wght.ttf

在TextStyle中設定

大功告成~

1
2
3
4
5
6
Text(
  "Some Text",
  style: TextStyle(
    fontFamily: "Quicksand",
  )
),