using local Google fonts not working

schochs · Dec 10, 2022

Hi there,

I installed Google Open Sans fonts following this procedure:
https://gwfh.mranftl.com/fonts/open-sans?subsets=latin
on my server in the directory:
templates/t4_bs5_blank/fonts/

I created this 'fonts.css' file:
/* open-sans-regular - latin /
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local(''),
url('templates/t4_bs5_blank/fonts/open-sans-v34-latin-regular.woff2') format('woff2'), / Chrome 26+, Opera 23+, Firefox 39+ /
url('templates/t4_bs5_blank/fonts/open-sans-v34-latin-r/ open-sans-regular - latin */
...

When disabling Google fonts and adding the fonts-file to the custom fonts in T4, I can choose 'Open Sans', the fonts are all displayed correctly in the preview, but in the normal browser I see only the default Times Roman fonts.

What am I missing?

schochs · Dec 10, 2022

Edit:
I now helped myself by using single fonts entering the path to the font in the dialog box 'Font File Url'.
I used 'open-sans-v34-latin-regular.

Problem now is, I only have one 'font weight' to choose from:
https://i.imgur.com/lMz9K3Z.png

So I still would prefer to use the method with the Font CSS file, because - I assume - this would offer more font weights.

saguaros · Dec 13, 2022

I think you can load the font via font manager in template:

We also offer JA Font component to load Google fonts locally: https://www.joomlart.com/joomla/extensions/ja-font-component

ubo69 · Dec 14, 2022

I am having the same issue.

I have disabled Google fonts in the Typography settings and uploded the fonts and CSS files to /templates/ja_athena/fonts/ . I can select the roboto font nicely in the Font Family and have various Font Weight to choose from.

The Preview shows the font correctly, but after saving all changes, the live site does only show the Times font.

This is the Preview:

And this is the live site:

I have not managed to load the font via URL like schochs. It is displayed in the Typography settings, but not shown in either Preview or live site.

saguaros · Dec 15, 2022

ubo69 There is difference between loading font directly and the local font package like that.

Could you try to enable Google fonts and use our JA Fonts component? https://www.joomlart.com/joomla/extensions/ja-font-component

ubo69 · Dec 18, 2022

saguaros

I would love to try it out, but my JA Pro subscription does not cover this component.

saguaros · Dec 19, 2022

ubo69 We're offering biggest discount in year, pls check it out: https://www.joomlart.com/pricing

ubo69 · Dec 19, 2022

I have subscribed to extensions now and installed the component. It seems to work alright, no error messages. But the result is the same. Roboto font on the preview, but not on the live site. When I "clean" the fonts of the component and just use the Google fonts, roboto font is displayed on live site.

A little peculiar: a folder /media/com_jafont/fonts/google/roboto was created but there only is one roboto.css file in it, which is empty with 0 byte. There are no font files placed in the folder.

This is all on Joomla 4 with T4 Framework and Athena Template. I tried it as well on Joomla 3 with T3 Framework and Alumni Template. There, the exchange of Google fonts seem to work, I can see Roboto Font on the live site. However, the replaced fonts seem to have a litte less weight than the Google originals. The peculiar folder with just the empty CSS and no font files is there as well.

saguaros · Dec 20, 2022

ubo69 Could you submit a new topic and share the login credentials of your site so I can check?

Support Central