Help with custom font

Hello there
Could please anyone help me with an issue of vowels (Umlaute in German) on my website?
They are displayed correctly on all browsers except Safari. See the image attached.

https://www.elysia-living.ch/
PW: EL2024

Many thanks
Sibylle

Do you have any other font format: eg: ttf, woff, woff2?

Hi @tuanphan
Yes, I do have. I already tried .woff, but the problem was still the same.
Now I also tried .ttf and .woff2 as well, but nothing changed. Still wrong on Safari.

At the moment .woff2 is used.

Thank you
Sibylle

Have you tried declaring all font format into one code yet? something like this 

On 2/24/2024 at 8:11 AM, tuanphan said:

Have you tried declaring all font format into one code yet? something like this 

Hi @tuanphan. I tried now to insert the following code, but still not showing correct in Safari. This is my code:
 

/* font new */
@font-face {
  font-family: 'Classico';
  src: url('https://static1.squarespace.com/static/65b8c951444ba3568c38a245/t/65d7096dd06f7d446b85ccba/1708591469756/ClassicoRegular.woff2') format('woff2'),

/* Modern Browsers */
url('https://static1.squarespace.com/static/65b8c951444ba3568c38a245/t/65d709198ea47f6464ef17b0/1708591385270/ClassicoRegular.woff') format('woff'),

/* Pretty Modern Browsers */
url('https://static1.squarespace.com/static/65b8c951444ba3568c38a245/t/65d7089b6743983e5a4e7519/1708591259927/ClassicoRegular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://static1.squarespace.com/static/65b8c951444ba3568c38a245/t/65b8ca64a20cfe4c6473e639/1706609252306/Classico.otf') format('opentype');
}

/* Apply the font to heading elements */
h1, h2, h3, h4 {
  font-family: 'Classico';
  letter-spacing: 0em;
  font-weight: 500;
}

Thank you for your help!
Sibylle

Try this font face code to this

@font-face {
    font-family: 'Classico';
    src: url('https://static1.squarespace.com/static/65b8c951444ba3568c38a245/t/65d7096dd06f7d446b85ccba/1708591469756/ClassicoRegular.woff2') format('woff2');
    src:url('https://static1.squarespace.com/static/65b8c951444ba3568c38a245/t/65d709198ea47f6464ef17b0/1708591385270/ClassicoRegular.woff') format('woff'),/* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/65b8c951444ba3568c38a245/t/65d7089b6743983e5a4e7519/1708591259927/ClassicoRegular.ttf') format('truetype'),/* Safari, Android, iOS */ url('https://static1.squarespace.com/static/65b8c951444ba3568c38a245/t/65b8ca64a20cfe4c6473e639/1706609252306/Classico.otf') format('opentype');
}

3 hours ago, tuanphan said:

Try this font face code to this

@font-face {
    font-family: 'Classico';
    src: url('https://static1.squarespace.com/static/65b8c951444ba3568c38a245/t/65d7096dd06f7d446b85ccba/1708591469756/ClassicoRegular.woff2') format('woff2');
    src:url('https://static1.squarespace.com/static/65b8c951444ba3568c38a245/t/65d709198ea47f6464ef17b0/1708591385270/ClassicoRegular.woff') format('woff'),/* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/65b8c951444ba3568c38a245/t/65d7089b6743983e5a4e7519/1708591259927/ClassicoRegular.ttf') format('truetype'),/* Safari, Android, iOS */ url('https://static1.squarespace.com/static/65b8c951444ba3568c38a245/t/65b8ca64a20cfe4c6473e639/1706609252306/Classico.otf') format('opentype');
}

 

Hi @tuanphan
What is the difference? The codes seem identically to me.
I tried to insert yours but still wrong in Safari 😞

Here is the code that is inserted now:

/* font new */
@font-face {
    font-family: 'Classico';
    src: url('https://static1.squarespace.com/static/65b8c951444ba3568c38a245/t/65d7096dd06f7d446b85ccba/1708591469756/ClassicoRegular.woff2') format('woff2');
    src:url('https://static1.squarespace.com/static/65b8c951444ba3568c38a245/t/65d709198ea47f6464ef17b0/1708591385270/ClassicoRegular.woff') format('woff'),/* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/65b8c951444ba3568c38a245/t/65d7089b6743983e5a4e7519/1708591259927/ClassicoRegular.ttf') format('truetype'),/* Safari, Android, iOS */ url('https://static1.squarespace.com/static/65b8c951444ba3568c38a245/t/65b8ca64a20cfe4c6473e639/1706609252306/Classico.otf') format('opentype');
}

/* Apply the font to heading elements */
h1, h2, h3, h4 {
  font-family: 'Classico';
  letter-spacing: 0em;
  font-weight: 500;
}

Thanks
Sibylle

Hi @tuanphan

I found the mistake! I just overwrote the vowels once more and now it is shown correctly.
Very grateful for your help!

Best
Sibylle