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.
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.
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.
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.
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.
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.
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.
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.
Sorry, but I’m still not able to push my project to the Github repo.
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
