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.

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!

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.

Or perhaps another method that we can try?

Above method is recommended HTML way. Even from Google Fonts you can download fonts and use them using this same method. Anyway, more tips:

1. https://write.corbpie.com/using-custom-ttf-or-otf-fonts-in-css-and-html/
2. https://www.pagecloud.com/blog/how-to-add-custom-fonts-to-any-website

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

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

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

Old, classic methods still works ;)

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