Custom font install and use - Forum | JoomShaper
Awaiting an answer Helix Framework

Custom font install and use

Asked by Alison 2 years ago Last activity 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

3 replies

Oldest first Newest first Most helpful
Paul Frankowski Senior Staff
2 years ago · edited

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

Alison Asked this
2 years ago

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'}
Paul Frankowski Senior Staff
2 years ago · edited

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

Alison Asked this
2 years ago

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

Log in to reply.