Page 1 of 1

Header font with local fonts

Posted: 07 Nov 2022, 03:21
by yellowbee
Good morning, 

I updated the styling with local fonts according to the following thread:
viewtopic.php?f=61&t=10461&sid=84079c09 ... 8c9952a598

The body font has worked fine. However, the header font fails to get the custom CSS. Could you please help what I might be missing? Thank you in advance! My homepage: https://www.studiodachtel.com
Screenshot_1.jpg
Screenshot_1.jpg (19.74 KiB) Viewed 9134 times

Re: Header font with local fonts

Posted: 07 Nov 2022, 03:59
by mjau-mjau
I checked your website. What do you have under Settings > Style > Font? It seems like this value is set to "none" ... This setting should remain on the same as when you were using the fonts hosted at Google. The fix just makes sure the font files are served from the origin server, and not from Google.

If you want me to take a look, please provide panel login by private message or email karl AT photo.gallery.

Re: Header font with local fonts

Posted: 11 Nov 2022, 11:07
by yellowbee
Hello, 

Sorry for the late reply. Yes I changed the Settings > Style > Font to "none" because with the original font "Lato", even the body font will not be correct. 

I'll send you the login by private message. Thanks a lot! 

Re: Header font with local fonts

Posted: 12 Nov 2022, 06:51
by yellowbee
It is working now. Both header and body are using the same font "Lato". Thanks for your help. 

Besides, I set the font in the setting to "none", because I read your reply in another thread (#2): 

viewtopic.php?f=60&t=10323

Re: Header font with local fonts

Posted: 12 Nov 2022, 07:07
by mjau-mjau
Not sure if there is something cache related, but it doesn't seem to be working here ... It's showing default "Helvetica" font, and settings > font is set to "[none]".
yellowbee wrote:Besides, I set the font in the setting to "none", because I read your reply in another thread (#2): 
viewtopic.php?f=60&t=10323
Sure, but that post is specifically about disabling any font settings from X3, in which case you would have to assign fonts manually via CSS, also to specific elements where you want different fonts/styles.

The Google fonts fix, simply replaces the location of the loaded font, while keeping X3 font settings.

Re: Header font with local fonts

Posted: 12 Nov 2022, 07:13
by yellowbee
Alright thanks for the explanation! I might need to spend more time next week :sweat_smile:

Re: Header font with local fonts

Posted: 12 Nov 2022, 08:14
by yellowbee
I managed to get the font right. It is weird that the fonts cannot be found in the defined "fonts" folder, which is located in the installation folder of the current X3. So I tried to create the same "fonts" folder in the upper folder. I changed the path in the CSS definition to ../fonts/. Now it is working. 

I'm not sure why the path "/fonts/" doesn't work. But the problem is solved. 

Re: Header font with local fonts

Posted: 12 Nov 2022, 10:37
by mjau-mjau
In your screenshot, I see you have "../fonts". In the post, it's mentioned that you need to change the PATH from "../fonts/.." to root-relative "/fonts/..". This is because you can't have relative links to font files from all pages in X3, because then the link to the fonts will be wrong, depending on what page is initially loaded. For example, if you load /pagex/pagey/pagez/, relative url "../fonts/font.woff" would point to /pagex/pagey/fonts/font.woff.

Re: Header font with local fonts

Posted: 12 Nov 2022, 10:56
by yellowbee
mjau-mjau wrote: In your screenshot, I see you have "../fonts". In the post, it's mentioned that you need to change the PATH from "../fonts/.." to root-relative "/fonts/..". This is because you can't have relative links to font files from all pages in X3, because then the link to the fonts will be wrong, depending on what page is initially loaded. For example, if you load /pagex/pagey/pagez/, relative url "../fonts/font.woff" would point to /pagex/pagey/fonts/font.woff.
Yes. I realized the point is that I need to put the fonts folder in the root folder of my website, not the installation folder. Now I switched to /fonts/ and everything is working fine. 

Thanks again for your help!