我非常推崇使用系統字體，它們快速、輕量且效果出色，但有時候你也需要一些特別的字體。
你需要一款能讓你的設計看起來很好的字體，也許像Slabo、Lato或Raleway這樣的字體。
Google提供了一個名為Google Fonts的工具，作為其眾多服務的一部分，該工具（截至撰寫本文時）支援992個字型家族：
這個界面有點令人眼花繚亂，作為一個對字體不熟悉的人，我肯定對我應該選擇哪一款字體感到困惑。
通常我會在Google上搜索「最佳Google字體」，並查看我獲得的文章，以獲得字體可能的外觀。在Google Fonts上查看數十種字體不是一個理想的方法，而且一些網站使用顏色來簡化選擇，就像這篇文章一樣：
讓我們來看一下我在我的其中一個網站上使用的字體：Press Start 2P。
這是一款適合復古網站的字體。我在我的Web平台課程首頁上使用了它，我希望給它一個電腦般的外觀。
在字體頁面上，你可以看到每個字符的呈現方式：
向下滾動，你可以看到設計師是誰，還有一個重要的部分：許可證。在這種情況下，該頁面上說明了：
您可以在您的產品和項目中自由使用這些字體，包括打印或數字格式，商業或其他用途。然而，您不能單獨出售字體。
這給了我們很多權限。
我們可以根據我們的需要自由使用這個字體，甚至在商業項目中使用它，但我們不能重新販售它。
在底部還有一個有趣的部分，列出了與這款字體常見配對的字體：
對於字體，我嘗試盡可能保守，因為大多數時候我不知道我在做什麼，觀察他人的做法並複製最合理的選擇是一個好策略。
現在你可以點擊頁面右上方的「下載字體系列」鏈接來下載TTF字體文件，你可以安裝它並在桌面程序中使用它作為字體。
但你不需要這樣做來在網站上使用字體。
你可以點擊「樣式」區域旁邊的「選擇此樣式」來將它添加到已選字體側邊欄：
完成後，你點擊嵌入選項卡，你可以找到要在項目中輸入的代碼：一個用於在HTML中包含字體的link元素，以及應用字體家族到特定元素的CSS規則：
所以在這個例子中，你需要添加以下HTML：
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
然後添加以下CSS：
body { /*在這裡使用你喜歡的選擇器*/
font-family: 'Press Start 2P', cursive;
}
我們使用了一個回退字體，以防字體無法加載或花費太多時間加載。
另一種包含字體的方法是使用CSS中的@import指令，這樣你就不需要在HTML中使用link屬性 - 一切都在CSS文件中：
@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);
但這種方法有一個限制：速度較慢。如果字體在HTML中連結，瀏覽器會在讀取HTML後立即對字體URL發出請求。
如果字體在CSS中連結，瀏覽器首先必須對CSS進行請求，然後才能對字體URL進行請求。
就在這幾毫秒的時間內，頁面的加載中就可能出現立即加載帶有正確字體的頁面和帶有回退字體的頁面之間的差異，當正確字體可用時再加載正確字體的頁面。