Custom Font Install And Use - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

Custom Font Install And Use

Alison

Alison

Helix Framework 2 years ago

Hi

How do I install a custom font so I can use it with helix template (for headings and navigation)

I have the webfont package I am just not sure how to install it.

Thanks Alison

0
4 Answers
Order by
Oldest Newest Votes
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #136448

Hi Alison,

Helix template do not have Font installer as SPPB, but you can use classic CSS method. For you as webmaster it shouldn't be a problem.

Guide (TEXT & VIDEO): https://www.joomshaper.com/documentation/helix-framework/customization-tips#customfont

0
Alison
Alison
Accepted Answer
2 years ago #136455

Thanks Paul

I have given it a go, I am not much good with code. This is what I have but it is not showing up in my fonts list, should it?

@font-face {
    font-family: 'fucxed_capsregular';
    src: url('fucxedcaps-v2-webfont.woff2') format('woff2'),
         url('fucxedcaps-v2-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


 h1,h2,h3,h4,h5,h6,a {font-family: 'fucxed_capsregular'}
0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #136557

Almost prefect... but please:

  1. In CSS add full corrrect PATH (URL) to each font file, with https etc.
  2. Make sure that in Template Options > Typography > H1-H6 has disabled font.

Your font has very orginal "first" name ;p, haha

0
Alison
Alison
Accepted Answer
2 years ago #136566

Thanks Paul

It works!!

I changed it to 

@font-face {
    font-family: 'fucxed_capsregular';
    src: url('../fonts/fucxedcaps-v2-webfont.woff2') format('woff2'),
         url('../fonts/fucxedcaps-v2-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


 h1,h2,h3,h4,h5,h6,a {font-family: 'fucxed_capsregular'}

So GRATEFUL for your support as always, you are a super star. Thank you thank you thank you.

Alison

p.s. it is not my font, it is the font developed by Extinction Rebellion - and it makes me smile - lol

0