Custom Font Not Loading - Question | JoomShaper
🎃 Halloween Sale is Live! Get 35% OFF on all plans. Sale ends soon! Get Offer
Back to the questions

Custom Font Not Loading

PR

Peter De Reyghere

General 3 years ago

Hi

I've searching for my errors but cannot find one...

I followed all steps to add a custom font on my website

I converted the font to woff, put it into the folder fonts of my template added .../fonts/

Added this code to custom.css

@font-face { font-family: 'hero_newultralight'; src: url('https://www.hoorcentrumdekievit.be/templates/shaper_helixultimate/fonts/hero_new_ultralight-webfont.woff') format('woff'); font-weight: normal; font-style: normal;

}

body { font-family: 'hero_newultralight'; font-size: 20px;}

h1 { font-family: 'hero_newultralight', Arial; font-size: 75px; }

h2 { font-family: 'hero_newultralight', Arial; font-size: 60px; color: #960A0A;}

h3 { font-family: 'hero_newultralight', Arial; font-size: 30px;}

But still, if you look at https://www.hoorcentrumdekievit.be and take a look at the first heading, it is still Arial and not hero What am I doeing wrong?

0
11 Answers
Order by
Oldest Newest Votes
PR
Peter De Reyghere
Accepted Answer
3 years ago #87923

I just checked again and sometimes the custom font loads, and sometimes it does not. different browsers, different computers,... aah going crazy...

0
Pavel
Pavel
Accepted Answer
3 years ago #87928

Hi.

In some places you use the font setting in the addon. Check all addons one by one and turn it OFF

Domain and ' not need in path

Also you need woff2 - it's modern format. It should be connect first in css.

Example

@font-face { 
    font-family: 'hero_newultralight'; 
    src: url(/templates/shaper_helixultimate/fonts/hero_new_ultralight-webfont.woff2) format('woff2'),
            url(/templates/shaper_helixultimate/fonts/hero_new_ultralight-webfont.woff) format('woff');
    font-weight: normal; 
    font-style: normal;
    font-display: swap;
    }
body { 
    font-family: 'hero_newultralight', sans-serif; 
    font-size: 20px;
    }
h1 { 
    font-size: 75px; 
    }
h2 { 
    font-size: 60px; 
    color: #960A0A;
    }
h3 { 
    font-size: 30px;
    }

If for headings font the same as for body, you don't need it in code for headings

0
PR
Peter De Reyghere
Accepted Answer
3 years ago #87955

Wow, thanks Pavel, you helped me a lot.

Especially the ' was important. I deleted it and suddenly everything was fixed.

I also followed al the other advice. Cheers man!

0
Pavel
Pavel
Accepted Answer
3 years ago #87978

Hi Peter. You are wellcome

0
PR
Peter De Reyghere
Accepted Answer
1 year ago #137755

Yes, my hero!

Details, details, details....

Thanks a lot Pavel!

0
PR
Peter De Reyghere
Accepted Answer
1 year ago #137713

Hi Pavel

One year later, I have the same problem with another custom font which is not loading.

here are the details...:

  • i've copied the font to right directory /templates/shaper_helixultimate/fonts/Repo-Light.woff2
  • there is also a stylesheet.css with the code (don't know if this is necesairy...) @font-face { font-family: 'Repo Light'; font-style: normal; font-weight: normal; src: local('Repo Light'), url('Repo-Light.woff2') format('woff2'); }

-- and in the custom css @font-face { font-family: 'Repo Light'; font-style: normal; font-weight: normal; src: local('Repo Light'), url('Repo-Light.woff2') format('woff2'); }

body { font-family: 'Repo Light', sans-serif; font-size: 20px; } h1 { font-size: 75px; } h2 { font-size: 60px; } h3 { font-size: 30px; }

0
Pavel
Pavel
Accepted Answer
1 year ago #137747

Hi Peter.

This path should be here, without quotes.

And please use this to demonstrate your code

0
PR
Peter De Reyghere
Accepted Answer
1 year ago #137750

Hi Thanks Pavel, but still not working.

Right now custom css looks like this

@font-face {
    font-family: 'Repo Light';
src: url(emma/templates/shaper_helixultimate/fonts/Repo-Light.woff2) format('woff2'),       url(emma/templates/shaper_helixultimate/fonts/Repo-Light.woff) format('woff');
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    }

body { 
    font-family: 'Repo Light', sans-serif; 
    font-size: 20px;
    }
h1 { 
    font-size: 75px; 
    }
h2 { 
    font-size: 60px; 
    }
h3 { 
    font-size: 30px;
    }
0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 years ago #87988

Hello Peter Reyghere!

Glad that the issue has been resolved already.

Thanks @Pavel for helping him out with clear instructions.

Best Regards

0
Pavel
Pavel
Accepted Answer
1 year ago #137752

You lost slash before

And instead of a comma should be a point with a comma

0
Pavel
Pavel
Accepted Answer
1 year ago #137776

I did not notice the scroll, so return the comma to its place.

And move the line for better readability.

@font-face {
    font-family: 'Repo Light';
src: url(/emma/templates/shaper_helixultimate/fonts/Repo-Light.woff2) format('woff2'),       
    url(/emma/templates/shaper_helixultimate/fonts/Repo-Light.woff) format('woff');
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}
0