Custom font doesn't work in some browsers!

Hi folks, I have an issue with my website and could use your support.

I've uploaded a custom font (otf file). However, when I open my site in the Safari browser, the font is not displayed. It works in Google Chrome for me, but for another person on a different device, the font wasn't displayed correctly in Chrome either. Is there a way to fix this issue?

I would greatly appreciate your help!

Site: https://maltemartenmethod.squarespace.com/
Paword: maltemartenmethod2023

Your font face code is missing. Change this

@font-face {
    font-family: 'NeulisNeue-Light';
    src: url('FontURLhttps://static1.squarespace.com/static/65731716193b7c7838fafff6/t/658feb21f8973a39163ed429/1703930657551/NeulisNeue-Regular.otfhttps://static1.squarespace.com/static/65731716193b7c7838fafff6/t/658ff397cbd6c827388b53aa/1703932824061/NeulisNeue-Light.otfhttps://static1.squarespace.com/static/65731716193b7c7838fafff6/t/65948580dfd751450a5d897e/1704232320659/NeulisNeue-Thin.otfhttps://static1.squarespace.com/static/65731716193b7c7838fafff6/t/6594861916c21c08653cb93d/1704232473658/NeulisNeue-ExtraLight.otf')
}

to this

@font-face {
    font-family: 'NeulisNeue-Light';
    src: url(https://static1.squarespace.com/static/65731716193b7c7838fafff6/t/658feb21f8973a39163ed429/1703930657551/NeulisNeue-Regular.otf);
}

@tuanphan I've uploaded a custom font with various font weights and use it for specific paragraphs and headings. Unfortunately, the paragraphs are not displayed correctly in the browser. The font appears much bolder, but it should be significantly slimmer. Attached is an image (left) from the Squarespace preview where it is displayed correctly, and on the right is the browser view. What do I need to change to ensure that the font is displayed correctly? Here's the code I've entered. I would greatly appreciate any help!

Site: https://maltemartenmethod.squarespace.com/
Paword: maltemartenmethod2023



Code:

/*Custom Font*/
@font-face {
    font-family: 'NeulisNeue-Light';
    src: url(https://static1.squarespace.com/static/65731716193b7c7838fafff6/t/658ff397cbd6c827388b53aa/1703932824061/NeulisNeue-Light.otf);
}

@font-face {
  font-family: 'NeulisNeue-Regular';
    src: url(https://static1.squarespace.com/static/65731716193b7c7838fafff6/t/658feb21f8973a39163ed429/1703930657551/NeulisNeue-Regular.otf);
}

@font-face {
  font-family: 'NeulisNeue-ExtraLight';
    src: url(https://static1.squarespace.com/static/65731716193b7c7838fafff6/t/6594861916c21c08653cb93d/1704232473658/NeulisNeue-ExtraLight.otf);
}

h1 {
font-family: 'NeulisNeue-Light';
font-weight: 100;
font-style: regular;
font-size: 6.2rem;
letter-spacing: -0.02em;
text-transform: none;
line-height: 1.2em;
}

h2 {
font-family: 'NeulisNeue-Light'!important;
font-weight: 100;
font-style: regular;
font-size: 4rem;
letter-spacing: -0.04em;
text-transform: none;
line-height: 1.2em;
}

h3 {
font-family: 'NeulisNeue-Light' !important;
font-weight: 100;
font-style: regular;
font-size: 2.1rem;
letter-spacing: -0.03em;
text-transform: none;
line-height: 1.4em;
}

h4 {
font-family: 'NeulisNeue-Light';
font-weight: 100;
font-style: regular;
font-size: 1.7rem;
letter-spacing: -0.03em;
text-transform: none;
line-height: 1.4em;
}

.sqsrte-large {
font-family: 'NeulisNeue-ExtraLight';
font-weight: 100;
font-style: regular;
font-size: 1.5rem;
letter-spacing: -0.02em;
text-transform: none;
line-height: 1.6em;
}

p {
font-family: 'NeulisNeue-ExtraLight' !important;
font-weight: 100;
font-style: regular;
font-size: 1.2rem;
letter-spacing: -0.03em;
text-transform: none;
line-height: 1.6em;
}

.sqsrte-small {
font-family: 'NeulisNeue-ExtraLight';
font-weight: 100;
font-style: regular;
font-size: 1.1rem;
letter-spacing: -0.02em;
text-transform: none;
line-height: 1.6em;
}

.sqs-block-button-element {
  font-family: 'NeulisNeue-Regular' !important;
font-size: 1.1rem !important;
}

.newsletter-form-button {
  font-family: 'NeulisNeue-Regular'!important;
}

/*Navigation in Custom Font*/
.header-nav-item {
  font-family: 'NeulisNeue-Regular'!important;
  font-size: 0.9rem !important;
}

Do you have any other format? eg: ttf, woff, woff2..? We can try code to declare all formats

@tuanphan

Regarding the different formats, I'm not exactly sure what you mean. Could you explain that again?

I've tried again, and in Chrome and Safari, everything is now displayed correctly as it should. However, in Safari (only!), the font in the site menu is somehow displayed larger than desired. How can I adjust that?

The issue still persists in the Firefox browser, and the font is still noticeably bolder than desired. Do you know what could be causing this? And is there a way to change it?

I meant declare all font format, something like this example

Hi. I hope someone can assist me. I've read through quite a few of these ad attempted to follow instructions, but the custom fonts is still showing correctly on Chrome (bold), but incorrectly on Safari (not bold).

This is the code I have used :

//--- Your Custom Font ---//
@font-face{ 
font-family: 'Brown';
src:
url('https://static1.squarespace.com/static/664c85dc9c0746509c375954/t/664c88f1a030871c47038c20/1716291826055/Brown-Bold.otf') format('OpenType');
font-weight: 600!important;}

h1, h2, h3, h4 {
  font-family:'Brown' !important;
}

//--- Apply Site Wide---//
* { font-family:"Brown" !important; }

thank you in advance!

15 hours ago, lauriking said:

Hi. I hope someone can assist me. I've read through quite a few of these ad attempted to follow instructions, but the custom fonts is still showing correctly on Chrome (bold), but incorrectly on Safari (not bold).

This is the code I have used :

//--- Your Custom Font ---//
@font-face{ 
font-family: 'Brown';
src:
url('https://static1.squarespace.com/static/664c85dc9c0746509c375954/t/664c88f1a030871c47038c20/1716291826055/Brown-Bold.otf') format('OpenType');
font-weight: 600!important;}

h1, h2, h3, h4 {
  font-family:'Brown' !important;
}

//--- Apply Site Wide---//
* { font-family:"Brown" !important; }

 

thank you in advance!

Try this new code. If it doesn't work, you can share site url, we can check easier

@font-face{ 
	font-family: 'Brown';
	src:url('https://static1.squarespace.com/static/664c85dc9c0746509c375954/t/664c88f1a030871c47038c20/1716291826055/Brown-Bold.otf');
	font-weight: 600;
}

body * {
  font-family:'Brown' !important;
}