Once more: Problems with locally hosted Google fonts

Hi, I am Berni from Germany and new to Hugo. However I used it to built a small side with blog using the beautifulhugo theme. I like the Hugo concept very much and I’m quite satisfied with it.
But: We may get problems in Germany with loading Google fonts from fonts.googleapis.com. Therefore I tried to modify my Beautifulhugo theme to load the Google fonts locally.

I followed the hints here, downloaded the fonts, put it into the local font directory and modified the font.css. Unfortunately without success: The test side “sicher3” always stated, the the fonts were loaded from googleapis.com.

Finally I had to change the font pathes in the index.html, which hugo creates. That worked. But where is the place in the hugo directory hirachary, where I can change these pathes permanent? It is crazy to change the index.html after each hugo run again.
Hope, one of the cracks here can enlighten me.

Regards
Berni

You are more likely to receive a prompt and accurate response if you post a link to the public repository for your project.

See https://discourse.gohugo.io/t/requesting-help/9132.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

Thanks @jmooring for your hints. The public repo is blog.bullet500.de.

So far I don’t have a code repository and had never worked with Git. However I will read about using Git now and then create a git repo for my blog.
Will be back soon.

Berni

The link elements in your header look broken, for example
<link rel="stylesheet" href="https://blog.bullet500.de/fonts/lora/css?family=Lora:400,700,400italic,700italic">
This seems to be bogus code.

On a side note: if you are “new to Hugo”, why don’t you start out with a simple theme? From what I can see, you’re using a terribly bloated something with tens of CSS files, one on top of the other (KaTeX for a blog on motorcycles – why?). Fixing things is a lot easier if you follow the KISS principle. At least until you’re no longer “new to Hugo”, that is.

Before this link element pointed to the Google font page and I simpliy changed it to point to a local font directory. That works, but may be not a proper solution. Why do you thinks, it is broken?

I did’nt know tha Beautifulhgo is a is a complicated or even bloated theme. It looked so simple and clear for me. May you recommend a suitable, nice & easy theme?
Berni

<link rel="stylesheet" href="https://blog.bullet500.de/fonts/lora/css?family=Lora:400,700,400italic,700italic"> doesn’t point to anything useful. Much less is the browser loading your local fonts.

Load your page in your favorite browser, open its developer tools and have a look at the error messages. I see this:
GET https://blog.bullet500.de/fonts/lora/css?family=Lora:400,700,400italic,700italic [HTTP/1.1 404 Not Found 78ms]
Perhaps you mean to load lora.css or something else. Since you don’t show your code, we can’t know. In any case, a stylesheet link must point to a stylesheet, and you can’t pass font names to a stylesheet, either.

Edit: Now I see where that’s coming from: The Google Font API call https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic. That is something else entirely - they have their own endpoint that does something intelligent with the query string. You don’t have that on your server. So you must provide a correct CSS for that.
BTW: One of the last issues of c’t magazine (you’re in Germany, right?) talked lenghtily about substituting Google fonts with locally hosted ones.

Have a look at the number of stylesheets loaded (again, in your favorite browser’s developer tools). Personally, I don’t really care much for themes and rather build my own. Then I at least know what’s going on and who’s responsible. And I can fix stuff myself.

Puh - sounds heavy to me. I understand that the local fonts never would be loaded - but the google fonts on the google server also not. That was a first step to cut my blog from Google.

I tried to share my code on Github, but I failed. Firstly I created a new git repository and than tried to push my local hugo directory to that repo. No chance, because a simple login with username & password is no longer supported by Git. So at first I have to solve this problem. Thats to so easy for me, as I am not aprogrammer or experienced github user.

Building my own theme may be nice, but I wanted a quick & dirty blog -nothing else. :slightly_smiling_face:

Unfortunately I missed the ct magazine with the article about Google fonts, but will try to read it online.
Meanwile I work on my Github account.

Berni

At least in the site you linked to here they were indeed loaded.

Where did you see this? :astonished:

Your css import is not correct for self-hosted fonts, you need to use a @font-face declaration.

Try the Google Webfonts Helper, it will give you the correct webfont file formats and the correct css to use to import them. Just adjust the path in the css examples to point to the actual location you place the font-files in your Hugo project. I’d recommend only taking the css for modern browsers.

No, they are not.
Screenshot 2022-11-08 at 13.53.35

Hmmh, I used the Google Webfonts Helper and pasted their webfile formats into my local fonts.css. Looks like I made a lot of mistakes.

During last hour I doublecheckes some themes and ended at the PaperMod theme (made by jmooring). Looks fine for me and does not load fonts from the Google website. Would you kindly check this under above link?
Berni

AFAICS, the fonts are not loaded from Google. But now you’re simply using Apple’s default font (or rather: I’m since I’m on macOS):
font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen,Ubuntu,Cantarell,open sans,helvetica neue,sans-serif;
If that’s what you want, it is fine. Otherwise, you might want to modify the font definitions.

But: All this is not related to Hugo. It’s about CSS and using local fonts.

1 Like

I don’t see any @font-face declaration in your css, so the font files are not loading. If you don’t know css then you maybe should just stick with Google’s recommended font-loading method and not worry to much about the GDPR issues.

As @jmooring already pointed out, it is almost impossible to help you without seeing your respository.

Sorry, but I’m still not able to push my project to the Github repo. :tired_face:
Therefore I copied the files form my themes/beautifulhugo/static/css to Github. I (only) guess that here is the problem.
This is the link: Github

Berni

Bad advice, especially for a German website. We have lawyers (or rather hawks) charging people for this violation, i.e. usage of Google-hosted fonts.

Yepp, that’s the reason why I want to stop loading fonts from the Google website: Bloody lawyers.

https://docs.github.com/en/get-started/quickstart/set-up-git

Yes, I am aware of that. In this case then the options are:

  1. Learn to css, or;
  2. Don’t use Google fonts.

As already identified, this is not a Hugo issue.

2 Likes