Injecting CSS so websites use locally installed Google fonts - html

Question

I installed several Google Fonts locally on a Windows box so that it will not have to connect to Google each time a website tries to use those fonts.
One of the fonts is Roboto, available from Google here: https://fonts.google.com/specimen/Roboto.
When I direct a web browser (Firefox) to open a web page that uses Roboto, it still goes to Google to download the font.
Here are two example URLs:
https://www.sitepoint.com/17-screencasting-tools-for-virtual-training/
https://www.belarc.com/
I figured that I possibly need to inject some CSS code to make this work, so I used userContent.css to inject some CSS into every page. Injecting the CSS code using a browser extension such as Stylus will have the same effect.
Here is the code I wrote:
#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');
}
I see no errors in my code, but the site is still downloading the font from Google instead of using the locally installed font.
Where is my code failing, and how can my code be improved to make it work? Also, can my code be simplified in any way?

Answer 1

This one is working:
#font-face { font-family: roboto-regular; src: url('./fonts/Roboto-Regular.ttf'); }
body {
font-family: roboto-regular;
}
Important: make sure that the path (the './fonts/Roboto-Regular.ttf') is correctly point to your TTF file.