0

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?

RockPaperLz- Mask it or Casket
  • 5,361
  • 10
  • 45
  • 69
  • https://stackoverflow.com/a/43572725/3436942 or https://stackoverflow.com/a/3837296/3436942 – jbutler483 Jul 05 '20 at 14:49
  • @jbutler483 Thanks. I gave it a try, but it didn't work. It seems to possibly be a CSS matching issue. I can get it to work using my code above on some sites, but not all (and not in the example site provided). As you can see, I've tried to account for every variance being used, but it's still not working. :( – RockPaperLz- Mask it or Casket Jul 05 '20 at 14:54

1 Answers1

0

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.

Niu Bee
  • 53
  • 4
  • Thanks Niu Bee (cute name!) - It's been a couple years since I wrote that question, but the big difference between your code and mine is the use of `roboto-regular` vs `roboto` for the `font-family`. Did you happen to try your variation and mine, and fine that to be the required difference? – RockPaperLz- Mask it or Casket Jun 04 '22 at 09:30
  • Thanks! :-) I answer because there's no accepted answer and probably someone asking in the future. I believe that the "roboto-regular" is just a name for reference when using it (in the in my example). The referred TTF file is more important. We can add for example: "roboto-italic" with path pointing to "Roboto-Italic.ttf", etc. – Niu Bee Jun 04 '22 at 10:03