How to use self-host Google Fonts - GDPR problem

Software Support
1

Hi everyone,
I have a problem with GDPR and Google Fonts.
I would like to use the google font from my server not from google website.
I modified my styleSheet.css adding this:

/* noto-sans-regular - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/plugins/themes/defaultManuscript/fonts/noto-sans-v27-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/plugins/themes/defaultManuscript/fonts/noto-sans-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/plugins/themes/defaultManuscript/fonts/noto-sans-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/plugins/themes/defaultManuscript/fonts/noto-sans-v27-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/plugins/themes/defaultManuscript/fonts/noto-sans-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/plugins/themes/defaultManuscript/fonts/noto-sans-v27-latin-regular.svg#NotoSans') format('svg'); /* Legacy iOS */
}

/* noto-serif-regular - latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: url('/plugins/themes/defaultManuscript/fonts/noto-serif-v21-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/plugins/themes/defaultManuscript/fonts/noto-serif-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/plugins/themes/defaultManuscript/fonts/noto-serif-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/plugins/themes/defaultManuscript/fonts/noto-serif-v21-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/plugins/themes/defaultManuscript/fonts/noto-serif-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/plugins/themes/defaultManuscript/fonts/noto-serif-v21-latin-regular.svg#NotoSerif') format('svg'); /* Legacy iOS */
}

Now if I check with a browser and “developer tools” I can see that in some parts it is fixed but in other nope, I still see that is going to search these 2 fonts online.
e.g.: https://fonts.gstatic.com/s/notoserif/v21/ga6Kaw1J5X9T9RW6j9bNfFImajC7.woff2

Do you have any suggestion on how to do it? I really cannot find anything about this topic here.

My settings:
OJS Current version: 3.2.1.3
PHP version 7.4.21

Many thanks,
Paolo

2

Hi @Pau

Which theme are you using and attempting to adjust? Do you have any other CSS file calling fonts?

Best,
Israel

3

Hi @israel.cefrin, sorry for my delay. I’m coming back to this topic.
We are using “Manuscript”.
I was checking via browser if I have some other css in use and I realize that I have an error 500: Style sheet could not be loaded. It is maybe this problem? Because is not loaded is going to search the font on google?

Many thanks,
Paolo

4

Hi @Pau

If the browser is unable to load your styleSheet.css file, it is probably the cause you can not render the fonts. Have you tried to open directly your css to ensure it is found by webserser? E.g.
Open url in browser: http://yourjournal_domain/public/journals/[JOURNAL_ID]/styleSheet.css

If it returns an error, you should investigate your file system and folders.

Best,
Israel

5

Hi @israel.cefrin,
I just tried and I have no error. I can see the css file in the browser.

Maybe an error in the font url?

/* noto-sans-regular - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/plugins/themes/defaultManuscript/fonts/noto-sans-v27-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/plugins/themes/defaultManuscript/fonts/noto-sans-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/plugins/themes/defaultManuscript/fonts/noto-sans-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/plugins/themes/defaultManuscript/fonts/noto-sans-v27-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/plugins/themes/defaultManuscript/fonts/noto-sans-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/plugins/themes/defaultManuscript/fonts/noto-sans-v27-latin-regular.svg#NotoSans') format('svg'); /* Legacy iOS */
}

/* noto-serif-regular - latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: url('/plugins/themes/defaultManuscript/fonts/noto-serif-v21-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/plugins/themes/defaultManuscript/fonts/noto-serif-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/plugins/themes/defaultManuscript/fonts/noto-serif-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/plugins/themes/defaultManuscript/fonts/noto-serif-v21-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/plugins/themes/defaultManuscript/fonts/noto-serif-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/plugins/themes/defaultManuscript/fonts/noto-serif-v21-latin-regular.svg#NotoSerif') format('svg'); /* Legacy iOS */
}
6

Are you running OJS on the root of your web folder?
Are you able to download the fonts if you point your browser to, e.g.:
http://yourjournal_domain/plugins/themes/defaultManuscript/fonts/noto-sans-v27-latin-regular.ttf

Best,
Israel

7

If I try this http://yourjournal_domain/plugins/themes/defaultManuscript/fonts/noto-sans-v27-latin-regular.ttf with my domain, it work perfectly, I download the font.

But I just tried again with this website https://www.ccm19.de/google-fonts-checker, i get this:
image

Thanks again,
Paolo