Hi Franc, I tried that, but still no change... I think we tried all possibilities now..let's close this matter as unsolved

thanks for trying!

Kind regards, Marion

try adding:

url('fonts/meowscript-regular-webfont.ttf')  format('truetype'),

but you need to put the ttf file of the font in you fonts directory

Hey Oliver, thanks for trying to help, I did that before and tried it again exactly how you wrote... but again this is worse than the way I do it now. At least it works on MAC firefox and chrome.

the fonts are directly in the root : http://www.zwickts-di.at/fonts

Hey Franc, thank you again, I did this now, but still no change ... I did a short cross browser test and it does not look like its working on PC either. I only have Mac.
Any more ideas?

thank you so much. Marion

Hi,
may I have a short comment/question?
I am just wondering if the referencing is ok?

If I see this URL https://www.zwickts-di.at/fonts/meowscript-regular-webfont.woff I would assume that the path might not be correct, except your fonts folder is directly in the joomla root.
If you mean the fonts folder in the template J51_Nina it should look like this: https://www.zwickts-di.at/templates/j51_nina/fonts/meowscript-regular-webfont.woff

If you copy the css code for the fonts from https://google-webfonts-helper.herokuapp.com/fonts/meow-script?subsets=latin
you could place it e.g. in your custom.css and that file is located in /templates/j51_nina/css.

If you do it like this, the CSS code from webfonts helper points one level down to /templates/j51_nina and then one level up to /templates/j51_nina/fonts.

Example:

@font-face {

  font-family: 'Noto Sans TC';

  font-style: normal;

  font-weight: 100;

  src: url('../fonts/noto-sans-tc-v2-latin-100.eot'); /* IE9 Compat Modes */

  src: local('Noto Sans TC Thin'), local('NotoSansTC-Thin'),

       url('../fonts/noto-sans-tc-v2-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

       url('../fonts/noto-sans-tc-v2-latin-100.woff2') format('woff2'), /* Super Modern Browsers */

       url('../fonts/noto-sans-tc-v2-latin-100.woff') format('woff'), /* Modern Browsers */

       url('../fonts/noto-sans-tc-v2-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */

       url('../fonts/noto-sans-tc-v2-latin-100.svg#NotoSansTC') format('svg'); /* Legacy iOS */

}

If you then put all font files to the /templates/j51_nina/fonts folder, the reference is fine.

Hope this helps.

Oliver

try just the woff2, your problem is with Apple
h1, h2, h3, h4, h5, h6 {
@font-face {
font-family: 'Meow Script';
font-style: normal;
font-weight: 400;
src: local(''),
url('fonts/meowscript-regular-webfont.woff2') format('woff2'),
}
}

Hi ,

thank you very much but still nope Safari won't work

marion

You have two locals with different fonts Try:

h1, h2, h3, h4, h5, h6 {
@font-face {
font-family: 'Meow Script';
font-style: normal;
font-weight: 400;
src: local(''),
url('fonts/meowscript-regular-webfont.woff2') format('woff2'),
url('fonts/meowscript-regular-webfont.woff') format('woff');
url('https://www.zwickts-di.at/fonts/meowscript-regular-webfont.woff') format('woff2');
}
}

Hi Ciaran,

yeah I have tried this too. all paths, like mentioned beneath and only the full url, nothing helps.

h1, h2, h3, h4, h5, h6 {
@font-face {
font-family: 'Meow Script';
src: local('Meow Script'), local('Meow-Script'), url('fonts/meowscript-regular-webfont.woff2') format('woff2'),
url('fonts/meowscript-regular-webfont.woff') format('woff'); url('https://www.zwickts-di.at/fonts/meowscript-regular-webfont.woff') format('woff2');
font-weight: 400;
font-style: normal;
}
}

Nobody had this problem before? :-) thank you so much , Marion

Hi Marion

Could you also try the full URL to the font including your domain. Eg..

https://www.yoursite.com/fonts/meowscript-regular-webfont.woff2') format('woff2

Ciaran

Hi again,

thank you that helps, but unfortunately only in Chrome and Firefox. Safari does not work. I have tried several versions including absolute path, nothing worked. this is the current version:

h1, h2, h3, h4, h5, h6 {
@font-face {
font-family: 'Meow Script';
src: local('Meow Script'), local('Meow-Script'), url('fonts/meowscript-regular-webfont.woff2') format('woff2'),
url('fonts/meowscript-regular-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
}
}

thank you so much, regards, Marion

your missing the opening statement
@font-face {

p.s. according to the demo file its not taken from google fonts, see https://google-webfonts-helper.herokuapp.com/fonts/meow-script?subsets=latin