Hi David

I have amended your CSS to the following which will allow you to not have to include the domain to the path. Hopefully this is what you have in mind?

@font-face {

  font-family: 'Courgette';

  font-style: normal;

  font-weight: 400;

  src: url('./templates/j51_layla/fonts/courgette-v13-latin-regular.eot'); /* IE9 Compat Modes */

  src: local(''),

       url('./templates/j51_layla/fonts/courgette-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

       url('./templates/j51_layla/fonts/courgette-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */

       url('./templates/j51_layla/fonts/courgette-v13-latin-regular.woff') format('woff'), /* Modern Browsers */

       url('./templates/j51_layla/fonts/courgette-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */

       url('./templates/j51_layla/fonts/courgette-v13-latin-regular.svg#Courgette') format('svg'); /* Legacy iOS */

	   font-display: swap;

}

Ciaran

Hi Ciaran

The solution does work. However I would like to add this to a custom.css file and this then doesn't have the desired affect. Appreciate it if you could help please?

It is worth noting that having added the

$googleFonts['Courgette'] = 'Courgette';

The font doesn't load from Google. Maybe this is no longer an option going forward due to privacy laws etc?

Thanks

David

I have now resolved this by doing the following.

I created a folder called fonts within the dev website, 2022/fonts and added the font files to that folder. So the folder is not in the template itself. I then used the following in the custom.css file.

@font-face {

  font-family: 'Courgette';

  font-style: normal;

  font-weight: 400;

  src: url('../fonts/courgette-v13-latin-regular.eot'); /* IE9 Compat Modes */

  src: local(''),

       url('../fonts/courgette-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

       url('../fonts/courgette-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */

       url('../fonts/courgette-v13-latin-regular.woff') format('woff'), /* Modern Browsers */

       url('../fonts/courgette-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */

       url('../fonts/courgette-v13-latin-regular.svg#Courgette') format('svg'); /* Legacy iOS */

	   font-display: swap;

}

I have then applied the styles where required which such as H1, H2 etc.

David

Hi David

Excellent work.. your solution looks perfect. Thank you for sharing

Ciaran

Sorry for adding my thoughts to this but if I read this, for me it seems this cannot work.

Why?

If I add a folder to Joomla installation root called "/fonts" and then add a font reference to a custom.css that is located in J4 in /media/templates/site/j51_xxx/css (or in /templates/j51_xxx/css in a J3 installation) and reference looks like
url('../fonts/courgette.....
than the reference points to this folder: /media/templates/site/j51_xxx/fonts (or /templates/j51_xxx/fonts in J3) and not to Joomla root /fonts.
This "../" means: go one folder down in hierachy and go to the folders referenced there.

In the above mentioned path in the custom.css the file (custom.css) must be located in root /whateverfolder/custom.css to work.
Then the reference to "../fonts/" can work .....

Maybe one should check the source code of the webpage to see if the fonts are still referenced by google and not locally?

If I am wrong, let me know pls. I only refer to the above post

Hi Oliver

thanks for your feedback. You are probably correct. I will take a look tomorrow and check folders etc. The font is loading and working as expected. I will add an update tomorrow.

David

Hi Oliver

I have checked and the fonts folder is in the media/templates/site/j51_layla as well. So your point is correct.

David