Helix Ultimate: Local Fonts Not Loaded In Frontend Editing - Question | JoomShaper

Helix Ultimate: Local Fonts Not Loaded In Frontend Editing

KE Comm

KE Comm

SP Page Builder 1 year ago

I am using Helix Ultimate as template and Pagebuilder 3 (yes, three!) and have implemented local fonts as described here: https://www.joomshaper.com/documentation/helix-framework/helixultimate/faq-how-to-do#customfont and here: https://www.youtube.com/embed/MfAIT8cMuv4 It works fine, if you acces the page as visitor.

However, if you edit a page in the frontend it does not load the font, instead it displays the browser standard serif font.

Google fonts are disabled in Template and Pagebuilder. What am I doing wrong?

0
25 Answers
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 11 months ago #116041

In general yes, but look at important 2nd step:

  1. try to use absolute path to font files, less problems
  2. And as I said before there is problem with Heading addon - that's why you have to force font load

h1, h2, h3, h4, h2.sppb-addon-title, h3.sppb-addon-title, .sppb-addon-header h2,. sppb-addon-header h3, h2.sppb-addon-title span, h3.sppb-addon-title span, #sp-page-builder h3, #sp-page-builder h2 {font-family: 'Nunito Sans', sans-serif!important;}

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 11 months ago #115099

Hi there,

I appreciate you reaching out. I sincerely apologize for this oversight. Will you please provide me the correct Joomla administrator access to check the issue? I will check & get back to you soon. 

Login denied! Your account has either been blocked or you have not activated it yet.

-Thanks

0
KE Comm
KE Comm
Accepted Answer
11 months ago #115225

The site has moved and gone live in the meantime, therefore I had to close the dev version. The login is active again now with the above credentials. Sorry for not having been able to update the post here

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 11 months ago #115390

Login access doesn't work sub-domain and main domain administrator URL doesn't work. Thanks

0
KE Comm
KE Comm
Accepted Answer
11 months ago #115392

It is only about the subdomain berner2.....

the credentials work. Make sure you do not copy a space at the end of the password. (It seems the forum is adding one)

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 11 months ago #115576
0
KE Comm
KE Comm
Accepted Answer
11 months ago #115615

Not on all pages: https://ibb.co/tHGSGbP

I thought it mifght be the browser, but it happens in Chrome and FF

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 11 months ago #115617

I have checked with the google chrome and it works fine. Thanks

0
KE Comm
KE Comm
Accepted Answer
11 months ago #115645

Not on my side. Not on all pages, at least: bernerfonts.gif

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 11 months ago #115749

You have added custom css code inside the custom.css file. Remove these css code and set font size from the Page Builder settings.

h1 {
  font-size:3rem;
  letter-spacing:1px;
}
h2 {
  font-size:2rem;
  letter-spacing:1px;
}
h3 {
  font-size:1.75rem;
  letter-spacing:1px;
}
h4 {
  font-size:1.25rem;
  letter-spacing:.5px;
}
h5  {
   font-size:1.1rem;
}
h6  {
   font-size:1rem;
}

-Thanks

0
KE Comm
KE Comm
Accepted Answer
11 months ago #115756

Thank you. But... it does not fix the issue.

I went as far as to completely remove the custom.css file but still get the Times New Roman in the editing mode:

![no custom css]() https://ibb.co/0F2DM4D ![eidtor]() https://ibb.co/MnYhWh2

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 11 months ago #115799

I just added 55px font size one of slider heading. Please check. Thanks

0
KE Comm
KE Comm
Accepted Answer
11 months ago #115804

Please note: I am NOT talking about the home page (only page with a slider). (Although the headlines there are still showing the wrong font on that page.)

home page https://ibb.co/b58wBRG

The page "consulting is a good example where the font is not loaded on the entire page in edit mode:

page "consulting" https://ibb.co/c27pVWk

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 11 months ago #115813
0
KE Comm
KE Comm
Accepted Answer
11 months ago #115817

I think you completely misunderstand me (sorry if I wasn't clear):

I do not mean font-size!!! I am talking about font-family!!!

The editor shows a serif-font (browser standard Times New Roman) not the custom font (Nunito) as defined in the CSS asp er your documentation in https://www.joomshaper.com/documentation/helix-framework/helixultimate/faq-how-to-do#customfont and here: https://www.youtube.com/embed/MfAIT8cMuv4

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 11 months ago #115942

if I may...

I will check becuase all those custom fonts guides are mine.

1
KE Comm
KE Comm
Accepted Answer
11 months ago #115943

I just restored the custom.css file

I had it removed since Toufiq criticised my font-size code in the custom.css file

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 11 months ago #115944

please tell me where you defined your custom fonts?

Today I cannot find them in Custom CSS area nor in custom.css file.

Please add them back as they were and tell me details. Then I can make a investigation.


extra tip! it's good to put absolute path to font files with https and domain name.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 11 months ago #116023

Thx, but you didn't listen none of my tips ;/

anyway, checking...

0
KE Comm
KE Comm
Accepted Answer
11 months ago #116027

I restored the custom.css file before you responded! Sorry, if that was a timing overlap. Toufiq told me to delete the font settings from the custom.css before, I was simply doing what was asked there.

The website under berner2.ke-server.de is a staging server. I am running two instances of the website there. One we are working on. the second to show the progress to the client. I have to deploy the website under a different URL multiple times a week, therefore I do not set absolute paths since I would have to change them every single time.

extra tip: The tutorial video does not work with absolute paths

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 11 months ago #116028

Fixed. Now all Headers should use font Nunito Sans also in Editor mode.

All changes are in custom.css file. Please clean browser cache to see changes!

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 11 months ago #116036

I hope you didn't delete my changes.... ??

0
KE Comm
KE Comm
Accepted Answer
11 months ago #116037

Okay, thank you!

Just in order that I understand this correctly for future projects. The frontend editor of PB only shows the correct font, if there are absolute paths to the fonts in the custom.css, correct?

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 11 months ago #116044

Just in order that I understand this correctly for future projects.

In SPPB 4.0.x this problem shouldn't be as I know. But we'll make some extra tests to be sure.

Support of SPPB 3.x will end before end of Summer (EU). So please consider migration in July/Aug.

0
KE Comm
KE Comm
Accepted Answer
11 months ago #116045

Super, thank you so much!

0