---
tags: CSS
---

# CSS｜font-family｜導入雲端字體｜內嵌字體｜特定區域使用不同字體

### 導入雲端字體 @import

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');

body{
  font-family: 'Noto Sans TC', sans-serif;
}

Google Fonts 提供了許多免費字型可用於個人與商用
https://fonts.google.com/

1. 查詢、選取所要的字型
2. 右方側邊欄中選取 @import 選項，複製程式碼。


3. 將已複製得程式碼貼至 網頁專案的 CSS 檔案中


4. 完成

---

### 專案中內嵌字體

1. 將你要用的字體檔放入你的網頁專案資料夾中
2. 引入方式同上

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');

body{
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
}

---
### 如何在同一個頁面中使用多種字型？

1. 步驟同上先將欲使用字型引入至 CSS 中
2. 在於應用得頁面之對應的 css 檔案撰寫 class

<style>
p.a {
  font-family: "Times New Roman", Times, serif;
}

p.b {
  font-family: Arial, Helvetica, sans-serif;
}
</style>


3. 完成

### 直接取用使用者本機端字型，非內嵌或外部引用字型。
為什麼要這樣用呢？
通常是因為我方沒有該字型的授權，所以不能內嵌網頁使用，需要使用者本機中擁有該字型，才會順利顯示，否則即用第二順位字型替代。

設定字型以字體簿中該字型的「系列名稱」為主
例如：系列 Noto Sans CJK TC

font-family: Noto Sans CJK TC, sans-serif;

---
參考資料：
* [CSS font-family Property｜w3school](https://www.w3schools.com/cssref/pr_font_font-family.asp)
* [font-family 的使用方法](https://andy6804tw.github.io/2018/02/09/web-font/)
* [How to import Google Web Font in CSS file?](https://stackoverflow.com/questions/14676613/how-to-import-google-web-font-in-css-file)
* [Google Fonts](https://fonts.google.com/)

---
###### tags: `CSS` `font-family` `導入雲端字體` `內嵌字體` `使用不同字體`