如何强制我的网站使用 Google 字体而不是本地同名字体？答案

【问题标题】：How can I force my website to use a Google font instead of a locally one with the same name?如何强制我的网站使用 Google 字体而不是本地同名字体？
【发布时间】：2016-06-17 07:01:26
【问题描述】：

我正在通过GoogleFont 将字体Oxygen 用于网站。然而，出于网页设计的目的，我通过FontSquirrel在我的电脑上下载了 Oxygen 字体。

显然它是相同的，但它看起来不同，我有大小问题。所以我在想：

有没有办法声明“我想使用 GoogleFont 字体，而不是存储在计算机中的字体，即使它具有相同的名称”？

因为如果有人使用完全不同的字体同名，可能会出现很多显示问题。

编辑：如何在 Google 的服务器上下载字体并将其托管在我的网站上？（该字体 100% 免费用于商业用途。）但如果可以这么简单，为什么很多网站都使用 Google 字体？

【问题讨论】：

locally installed TTF overrides Google fonts的可能重复
@Michael_B 确实，问题是一样的。不过，似乎并没有解决。下载 ttf 并自己托管呢？我的意思是，如果托管字体这么简单，为什么所有网站都使用 Google 字体？
就个人而言，我只使用 Google 字体，因为它很简单。我只需要粘贴一个链接就可以了。

标签： css fonts google-webfonts

【解决方案1】：

如果您有网络字体，您可以自己托管并在 css 中为它们指定您想要的任何名称，并避免本地字体加载的可能性。

例如：

@font-face {
font-family: 'myspecialfont';
src: url('oxygen-webfont.eot');
src: url('oxygen-webfont.eot?#iefix') format('embedded-opentype'),
     url('oxygen-webfont.woff2') format('woff2'),
     url('oxygen-webfont.woff') format('woff'),
     url('oxygen-webfont.ttf') format('truetype'),
     url('oxygen-webfont.svg#oxygenregular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {font-family: "myspecialfont", sans-serif;}

只需确保将 CSS 指向这些文件的正确路径（例如，如果将它们放在字体文件夹中，它可能是“../fonts/oxygen-webfont”）

人们使用 google 的主要原因是他们已经优化了它以提供字体，它减轻了服务器的负载，并且可能人们从 google 缓存了字体，使其加载速度更快。如果它是一种不常见的字体并且您的服务器不错，那么这些可能可以忽略不计。

【讨论】：