Custom Font CSS Code Injection defaults to Times New Roman

Hi there,

I've uploaded font files to my mac and pasted the following code into my website
Website Tools / Custom CSS. The fonts work fine on my MacBook but on some of my colleagues laptops the font defaults to something that resembles Times New Roman.

PLEASE NOTE: the issue seems to be on a Windows PC. Appears fine on Mac.

Any help is greatly appreciated!!

Neill
 

@font-face {
    font-family: AVENIR;
    src: url(https://static1.squarespace.com/static/6723a34e5706c225c4915c9d/t/6723cfdb7fc23d7bb77573b9/1730400219420/Avenir-Medium.woff);
} 

h1 {
    font-family: 'AVENIR';
}

h2 {
    font-family: 'AVENIR-light';
}

h3 {
    font-family: 'AVENIR';
}

h4 {
    font-family: 'AVENIR';
}

p {
    font-family: 'AVENIR';
}

.sqsrte-large {
    font-family: 'AVENIR';
}

.sqsrte-small {
    font-family: 'AVENIR';
}

h4 {
    font-size: 1rem !important;
    color: #EEE8E4;
    letter-spacing: 20px;
}

2 hours ago, Furmston said:

The fonts work fine on my MacBook but on some of my colleagues laptops the font defaults to something that resembles Times New Roman.

This is an indication that your custom font is not working correctly. Hence working on your machine but not others.

Here is what I can see from your code:

• The font-family name is not the same. AVENIR vs 'AVENIR'
• Only AVENIR has been declared with @font-face. Have you done the same for AVENIR-light?

Let me know how it goes.

It works on other people's laptops and everyone's smartphone I've seen.
The issue occurs when someone look at the site on a PC running Chrome

On 11/23/2024 at 6:13 AM, Furmston said:

It works on other people's laptops and everyone's smartphone I've seen.
The issue occurs when someone look at the site on a PC running Chrome

If you still need help, you can share site url, we can check easier

I am having the same issue on a website - all working correctly on my mac desktop, but another mac is showing times new romans and my client's macbook pro is also showing Times new roman.

Website:

https://stand-out-brands.squarespace.com/

pw: standout

18 minutes ago, rosieames said:

I am having the same issue on a website - all working correctly on my mac desktop, but another mac is showing times new romans and my client's macbook pro is also showing Times new roman.

Website:

https://stand-out-brands.squarespace.com/

pw: standout

I see you use nave custom font, however you haven't declared font-face for this font yet, you will need to use this code to top of CSS box

@font-face {
    font-family: nave;
    src: url(make sure you enter nave font file url here);
}

Oh thanks so much @tuanphan

How did I miss that? Couldn't see the wood for the trees!

As always you come to the rescue.

Rosie