我非常赞成使用系统字体，它们速度快、重量轻、效果好，但有时你需要有点花哨。
你需要一种特定的字体，使你的设计看起来不错。
也许是像Slabo、Lato或Raleway这样的漂亮字体。
作为其众多服务的一部分，谷歌提供了一个名为谷歌字体的工具，它（在我写这篇文章时）支持992个字体家族。
这个界面有点让人不知所措，作为一个不是字体专家的人，我肯定会对我应该选择哪种字体感到困惑。
我通常会在谷歌上搜索 "最好的谷歌字体"，然后看看得到的文章，以了解一种字体可能是什么样子。在谷歌字体上看几十种字体并不理想，有些网站用颜色让它变得很容易，就像这篇文章。
让我们拿我在一个网站中使用的一个字体来说吧。Press Start 2P。
这是一种很适合复古网站的字体。我在我的网络平台课程主页上使用了它，我想给它一个电脑的外观。
在字体页面上，你可以看到每个字符是如何呈现的。
向下滚动，你可以看到谁是设计师，还有一个重要的部分：许可证。在这种情况下，页面上写着
你可以在你的产品和项目中自由使用它们--印刷或数字，商业或其他。但是，你不能单独出售这些字体。
这给了我们很多的权限。
我们可以随意使用字体，甚至在商业项目中使用，但我们不能转售它。
在底部，我们有一个有趣的部分，列出了哪些字体经常与这个字体配对。
对于字体，我尽量保守，因为大多数时候我不知道自己在做什么，看看别人怎么做，复制最合理的选择是一个很好的策略。
现在你可以按下页面右上方的 "下载家族 "链接，下载字体的TTF文件，你可以把它安装在你的电脑上，在你的桌面程序中作为字体使用。
但是，你不需要这样做来在网站上使用该字体。
你可以做的是，在 "样式 "部分，点击你想要的每个样式旁边的 "选择此样式"。
这将把它添加到所选字体的侧边栏中。
一旦你完成了它，你可以点击嵌入选项卡，在那里你可以找到你需要在你的项目中输入的代码：一个link 元素，将字体包含在HTML中，以及CSS规则，将字体家族应用于特定元素。
所以在这种情况下，你需要做的是添加这个HTML。
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
然后再加上这个CSS。
body { /* use your favorite selector here */
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。
在这里损失的几毫秒可以使一个页面立即以正确的字体加载，与一个先以后备字体加载，然后在有正确字体时再加载的页面之间产生差异。
