Fonts - Local hosting - how to?

[Connie]

Dear Friends,

I am not so into website work anymore as I am pensioneer and work mostly non-digital anymore...
I knew how to include local hosted fonts, but today I am not succesfull


I need to host google fonts locally on the website of a friend, as you know the use of external data is quite sensitive and a problem in the EU...

1) I  take off the link to the google fonts in inc_header.php
2) I have downloaded the necessary fonts  from https://google-webfonts-helper.herokuapp.com
3) but now I am confused how to reference the font-face in the css-file (I knew it once, but I forgot)

Where should I upload the fonts to and how to reference in the css-file?

my directory structure was:

the theme: /htdocs/theme/my_theme
the fonts: /htdocs/theme/fonts/

an example for Cantarell Font in normal style, size 400:


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


the page did not load the google fonts from Google directly, but also did not read "my" fonts ..

please help me out!

All the best, Connie

[islander]

Hello Connie. Your structure looks to be good.
If you like, send me PM with a link to the site so I can look at the page source to see if I can spot anything.

[shawn_a]

https://github.com/GetSimpleCMS/GetSimpleCMS/pull/1355

[islander]

  src: url('../fonts/cantarell-v17-latin-regular.eot'); /* IE9 Compat Modes */

You could also try replacing "../" on each line with "theme/" to see if that would do the trick.

So it would be like :

PHP Code:

src: url('theme/fonts/cantarell-v17-latin-regular.eot'); /* IE9 Compat Modes */ 


[Connie]

Thank you all! I will try to replace the " with ' as a first step
and read the github-article

But I can do that only first on monday afternoon as I have guests over the weekend, I will let you know whether I could solve my problem!

Cheers, Connie

[shawn_a]

https://github.com/GetSimpleCMS/GetSimpl...1355/files

Looks like 2 changes source and css, might be an easier way but I have no idea, domaniko submitted this for us

[Connie]

Hurra! I got it!

I got the inspiration from the posting above and succeeded. 

Because I am so happy and reliefed now, I wrote a tutorial how to replace Google-Font-Loading by loading the same fonts from your server locally.

You can find the tutorial in the WIKI:

http://get-simple.info/wiki/loading_goog...ce-reasons

thanks for your inspiration!

[domaniko]

https://github.com/GetSimpleCMS/GetSimpl...1355/files

Looks like 2 changes source and css, might be an easier way but I have no idea, domaniko submitted this for us

Hello,

my change was done quite simple.

The original line, now removed, fetched the font loading CSS from Google server. There I found the statement where the font was loaded. I downloaded it and stored it together with the font file in a subdirectory. Then I added the inclusion of this font.css at the place where previously the Google CSS was loaded.

The path to font file is relative to the path of the font.css file, so if you store font.css and font file in same directory, you do not need any "../".

BR domaniko