漂亮的字體可以讓增添網頁個性及可讀性，但要注意載入外部字型 / 字體則會增加網站下載的時間，這兩者的平衡則交由網頁設計師的判斷，本篇介紹如何將外部字型載入 CSS 中
CSS 載入字型 / 字體
@font-face {
font-family: 'Helvetica';
src: local("Helvetica"),
url('../fonts/Helvetica.woff') format("woff"),
url('../fonts/Helvetica.ttf') format("opentype"),
url('../fonts/Helvetica.eot') format("embedded-opentype");
}font-family: 定義字體的名稱 'Helvetica' ，這名稱是可以自定義的
src: 依序載入字體，而 local( "Helvetica" )，會先找使用者電腦中是否有安裝此字體，如果有則直接使用使用者的系統字體，如果使用者系統沒此字體再依序下載字體
url: 相對路徑或絕對路徑
CSS 使用已載入字型 / 字體
H1 {
font-family: 'Helvetica';
}字體格式 ( format ) 對照表
| 字型格式 | 附檔名 | format() 指定方式 |
| WOFF（Web Open Font Format） | .woff | "woff" |
| TrueType | .ttf | "truetype" |
| OpenType | .ttf 或 .otf | "opentype" |
| Embedded OpenType | .eot | "embedded-opentype" |
| SVG Font | .svg 或 .svgz | "svg" |
Refrance:
https://blog.gtwang.org/web-development/css-font-face/
https://www.iware.com.tw/qa-508.html
