Hi

Thanks for contacting us and sorry for your issue. You can follow this tutorial below:

https://www.youtube.com/watch?v=MfAIT8cMuv4

-Regards.

Hi Paul,

Yes, watch my video, and later you can also read tutorial >> https://www.joomshaper.com/documentation/helix-framework/customization-tips#customfont

Here's what I've got in my custom.css file:

@font-face { font-family: 'Industry Test Demi'; src: url('Industry-Demi.woff2') format('woff2'), url('Industry-Demi.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }

@font-face { font-family: 'Industry Test'; src: url('Industry-Bold.woff2') format('woff2'), url('Industry-Bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; }

@font-face { font-family: 'Industry Test'; src: url('Industry-MediumItalic.woff2') format('woff2'), url('Industry-MediumItalic.woff') format('woff'); font-weight: 500; font-style: italic; font-display: swap; }

@font-face { font-family: 'Industry Test'; src: url('Industry-Black.woff2') format('woff2'), url('Industry-Black.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; }

@font-face { font-family: 'Industry Test'; src: url('Industry-BlackItalic.woff2') format('woff2'), url('Industry-BlackItalic.woff') format('woff'); font-weight: 800; font-style: italic; font-display: swap; }

@font-face { font-family: 'Industry Test Ultra'; src: url('Industry-UltraItalic.woff2') format('woff2'), url('Industry-UltraItalic.woff') format('woff'); font-weight: 900; font-style: italic; font-display: swap; }

@font-face { font-family: 'Industry Test'; src: url('Industry-ThinItalic.woff2') format('woff2'), url('Industry-ThinItalic.woff') format('woff'); font-weight: 100; font-style: italic; font-display: swap; }

@font-face { font-family: 'Industry Test Demi'; src: url('Industry-DemiItalic.woff2') format('woff2'), url('Industry-DemiItalic.woff') format('woff'); font-weight: 600; font-style: italic; font-display: swap; }

@font-face { font-family: 'Industry Test Book'; src: url('Industry-BookItalic.woff2') format('woff2'), url('Industry-BookItalic.woff') format('woff'); font-weight: normal; font-style: italic; font-display: swap; }

@font-face { font-family: 'Industry Test'; src: url('Industry-Medium.woff2') format('woff2'), url('Industry-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }

@font-face { font-family: 'Industry Test'; src: url('Industry-LightItalic.woff2') format('woff2'), url('Industry-LightItalic.woff') format('woff'); font-weight: 300; font-style: italic; font-display: swap; }

@font-face { font-family: 'Industry Test Book'; src: url('Industry-Book.woff2') format('woff2'), url('Industry-Book.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }

@font-face { font-family: 'Industry Test'; src: url('Industry-Thin.woff2') format('woff2'), url('Industry-Thin.woff') format('woff'); font-weight: 100; font-style: normal; font-display: swap; }

@font-face { font-family: 'Industry Test'; src: url('Industry-Light.woff2') format('woff2'), url('Industry-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; }

@font-face { font-family: 'Industry Test'; src: url('Industry-BoldItalic.woff2') format('woff2'), url('Industry-BoldItalic.woff') format('woff'); font-weight: bold; font-style: italic; font-display: swap; }

@font-face { font-family: 'Industry Test Ultra'; src: url('Industry-Ultra.woff2') format('woff2'), url('Industry-Ultra.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; }

body, p, h1, h2, h3, h4, a {font-family: 'Industry', Veranda;}

However, I can't choose it from the dropdown in the template's Typography settings (it doesn't exist in the list) and the fonts on https://mim.threecats.digital don't reflect the new font.

And your fonts files are where on what path , in which folder?

This is they KEY!

Joomla is like a lost tourist, you need to direct him exactly where to go.

The best way would be to use FULL PATH to each font file, and make sure that filename is correct, small vs big letters matter !

Look at my example, where all font files are inside "fonts" folder

The fonts themselves are located in a /fonts directory (in the public_html directory)

Here's a sample of what I have in the /templates/shaper_helixultimate/custom.css file:

@font-face { font-family: 'Industry Demi'; src: url('https://mim.threecats.digital/fonts/Industry-Demi.woff2') format('woff2'), url('https://mim.threecats.digital/fonts/Industry-Demi.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }

and so on. Still not showing up in the Template Options > Typography > Font list for any of the options (body, h1, h2, etc).

There is small misunderstanding. Using your method you can set custom font for seleted HTML tags, but there is NO integration with Typography from Helix Ultimate. Your method is manual and independent.

In my video, all works but you have to use correct font-family name for HTML tags (H1, h2, h3, p, li).

If you used Font Generator it should generate you also CSS file, that is very useful gudie. For example if you are 100% sure that font-family: 'Industry Demi'; is correct name for bolder font, then you have to use

H1 { font-family: 'Industry Demi';}

and do the same for other HTML tags.

In your post from yesterday you had font-family: 'Industry Test Demi'; !!?

And reduce number of fonts, I suppose that after all you need is Regular(Medium), Bold and Light. No need to use all Italic or Thin styles etc. More = Slower loading.

Sorry, but we can't teach you the basics of using custom Fonts, HTML and CSS, but there are many other advanced tutorials for that. Here we can share only basic tips. Support Policy 8.2. Thank you for your understanding.

I see. Is there a way to integrate these with Typography? If not, will any fonts I select within PageBuilder Pro override them?

My question / concern is that I will only be able to use those fonts that I specified in the custom.css file, and if I need to use another font elsewhere I won't be able to.