Using Custom Fonts - Forum | JoomShaper
Awaiting an answer SP Page Builder

Using Custom Fonts

Asked by Kelly Kamm 4 years ago Last activity 4 years ago

I have been trying to use new fonts outside of what SP Page Builder has built in but I can't figure it out. Most tutorials tell me to create a custom css file and add the stylesheet code along with the font-altering code their, but it doesn't work. I have tried editing several other css files but still, there is no change. Do you know what may be going wrong? Or perhaps another method that we can try? Thank you.

9 replies

Oldest first Newest first Most helpful
Ariba Staff
4 years ago

Hello

Thank you for your query. As this is not possible in SP Page builder, you can try something else. You can actually add custom font using template custom.css, you can check out the video guide link here: https://www.youtube.com/watch?v=MfAIT8cMuv4 In general custom font you set ones for selected HTML tags or classes, you don't have to select this font everytime in addon settings.

Kelly Kamm Asked this
4 years ago

We already tried using that video but that method didn't work. Are there any other ways to change the font or are their any common mistakes we may be making? Thanks!

Paul Frankowski Senior Staff
4 years ago · edited

Hi Kelly,

It was my video and this method still works. On my private site I uses extra fonts as well.

The most common mistake is wrong path to font files.

Maybe add full path with https://

2nd - check your custom font using .html file that you probably have to be sure that font-family name is 100% OK.

As 3rd step: disable other fonts (from template typography) that can be used for your Headers (h1..h6), p, li etc. if thsi custom font must be used for them

Besides without URL we can only guess like doctor in the fog.

Francois Barnard
4 years ago

Dear Paul

I am trying to add a TTF font to a website. I converted the TTF to EOT, WOFF2, and WOFF types and copied it to the folder /templates/shaper_helixultimate/fonts. I then added the following CSS to the Custom CSS file:

/* The following code to add the aesthetic font:
*/

@font-face {
  font-family: 'Aesthetik Script';
  src: url('/templates/shaper_helixultimate/fonts/Aesthetik Script.eot');
  src: url('/templates/shaper_helixultimate/fonts/Aesthetik Script.eot?#iefix') format('embedded-opentype'),
       url('/templates/shaper_helixultimate/fonts/Aesthetik Script.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'AesthetikScript';
  src: url('/templates/shaper_helixultimate/fonts/AesthetikScript.svg#AesthetikScript') format('svg'),
       url('/templates/shaper_helixultimate/fonts/AesthetikScript.ttf') format('truetype'),
       url('/templates/shaper_helixultimate/fonts/AesthetikScript.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body,p,h1,h2,h3,h4,a {font-family: 'aesthetik-script', Verdana;}

However, the font does not appear in the dropdown font list in SPPB.

What am I doing wrong here?

Regards,

Francois Barnard

Paul Frankowski Senior Staff
4 years ago · edited

However, the font does not appear in the dropdown font list in SPPB.

Nobody promiste you that. And it will NOT. We informed about details in our guides.
But You can still use this custom FONT via custom CSS or used class name inside addons.
Yes, it request a few seconds more.

Watch one of few videos: https://www.youtube.com/watch?v=VMfytsdxKHs

from that guide: https://www.joomshaper.com/documentation/sp-page-builder/sp-page-builder-3/google-fonts-and-dsgvo

Francois Barnard
4 years ago

Danke, Paul. Ich habe mir das deutsche Video angesehen und wurde mit dem Wissen herausgefordert, das ich vor 40 Jahren erworben habe.

Paul Frankowski Senior Staff
4 years ago

Old, classic methods still works ;)

Francois Barnard
4 years ago

Dear Paul

I created a fonts directory "fonts.own" adjacent to the fonts directory in the Helix template directory and created the custom.css file as per the German video instruction. I set H6 to point to the Aesthetik Script font and specific colour. The text I set in SPBG to H6 changed to the colour, but the font turned to a default Times New Roman font.

So I must be doing something wrong here.

I also changed the path to /templates/shaper_helixultimate/fonts.own/...., but that did not work.

@font-face {
  font-family: 'Aesthetik Script';
  src: url('/templates/shaper_helixultimate/fonts.own/Aesthetik Script.eot');
  src: url('/templates/shaper_helixultimate/fonts.own/Aesthetik Script.eot?#iefix') format('embedded-opentype'),
       url('/templates/shaper_helixultimate/fonts.own/Aesthetik Script.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'AesthetikScript';
  src: url('/templates/shaper_helixultimate/fonts.own/AesthetikScript.svg#AesthetikScript') format('svg'),
       url('/templates/shaper_helixultimate/fonts.own/AesthetikScript.ttf') format('truetype'),
       url('/templates/shaper_helixultimate/fonts.own/AesthetikScript.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

h6 {font-family: 'AesthetikScript'; color:#f05a27;}

See http://169.239.217.50/~doxit/it-matters At the bottom is the text "This is title"

Any ideas?

Regards,

Francois

Log in to reply.