注入CSS，以便网站使用本地安装的Google字体

Question

我在Windows盒子上本地安装了几种Google字体，这样每次网站尝试使用这些字体时都不必连接到Google。

其中一种字体是Roboto，可从谷歌获得：https://fonts.google.com/specimen/Roboto。

当我指示网络浏览器(Firefox(打开使用Roboto的网页时，它仍然会去谷歌下载字体。

以下是两个示例网址：

https://www.sitepoint.com/17-screencasting-tools-for-virtual-training/

https://www.belarc.com/

我认为我可能需要注入一些 CSS 代码才能完成这项工作，所以我使用userContent.css将一些 CSS 注入到每个页面中。 使用浏览器扩展(如 Stylus(注入 CSS 代码将具有相同的效果。

这是我写的代码：

@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
unicode-range: U+0-10FFFF;
src: local('Roboto-Regular');
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
unicode-range: U+0-10FFFF;
src: local('Roboto-Italic');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
unicode-range: U+0-10FFFF;
src: local('Roboto-Light');
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 300;
unicode-range: U+0-10FFFF;
src: local('Roboto-LightItalic');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
unicode-range: U+0-10FFFF;
src: local('Roboto-Medium');
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 500;
unicode-range: U+0-10FFFF;
src: local('Roboto-MediumItalic');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
unicode-range: U+0-10FFFF;
src: local('Roboto-Bold');
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 700;
unicode-range: U+0-10FFFF;
src: local('Roboto-BoldItalic');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
unicode-range: U+0-10FFFF;
src: local('Roboto-Black');
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 900;
unicode-range: U+0-10FFFF;
src: local('Roboto-BlackItalic');
}

我在代码中没有看到任何错误，但该网站仍在从 Google 下载字体，而不是使用本地安装的字体。

我的代码在哪里失败，如何改进我的代码以使其正常工作？ 另外，我的代码可以以任何方式简化吗？

Answer 1

这个正在工作：

@font-face { font-family: roboto-regular; src: url('./fonts/Roboto-Regular.ttf'); }
body {
font-family: roboto-regular;
}

重要提示：请确保路径("./fonts/Roboto-Regular.ttf"(正确指向您的 TTF 文件。