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

Question

我在Windows上安装了几个谷歌字体，这样每次网站尝试使用这些字体时，它都不必连接到谷歌。

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

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

下面是两个示例URL：

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

https://www.belarc.com/

我想我可能需要注入一些CSS代码来完成这项工作，所以我使用userContent.css将一些CSS注入到每个页面。使用浏览器扩展(如手写笔 )注入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文件。