Custom font not showing up in all browsers

Site URL: https://aspectfurniture.squarespace.com/

Hi there,

I've installed a custom font on the website for all text, but although shows up fine on Chrome, it's not displaying correctly in some other browsers.

Help please?

CSS below:

/*Adding FAVORIT font*/

@font-face {    
font-family: 'Favorit light';       
src: url('https://static1.squarespace.com/static/5d52382d4813620001d8fc41/t/6029c720fdf5dc081fb1f04b/1613350688241/favorit-light.otf');  }

@font-face {    
font-family: 'Favorit regular';       
src: url('https://static1.squarespace.com/static/5d52382d4813620001d8fc41/t/6029c732ef4fdf139f867521/1613350706747/favorit-regular.otf');  }

@font-face {    
font-family: 'Favorit bold';       
src: url('https://static1.squarespace.com/static/5d52382d4813620001d8fc41/t/6029c719ef4fdf139f8674a1/1613350682351/favorit-bold.otf');  }

@font-face {    
font-family: 'Favorit lining';       
src: url('https://static1.squarespace.com/static/5d52382d4813620001d8fc41/t/6029c73f963d572651042474/1613350719844/Favorit-Regular_Lining.ttf');  }

/*Assign font to headline and paragraph styles*/

h1 {
  font-family: 'Favorit light' !important;
}
h2 {
  font-family: 'Favorit light'!important;
}
h3 {
  font-family: 'Favorit regular'!important;
}
P {
  font-family: 'Favorit light'!important;
}

/*Navigation fonts*/

.Header-nav-folder-title {
  font-family: 'Favorit regular'!important;
}
.Header-nav-item {
  font-family: 'Favorit regular'!important;
}

/*Blog fonts*/

.BlogList-item-title {
  font-family: 'Favorit light'!important;
}

/* Image blocks, captions and button in image blocks */

.sqs-block-image * {
   font-family: 'Favorit light' !important;
}
.sqs-block-image .image-caption p {
 font-size: .95em !important;
 font-family: 'Favorit light' !important;
}

/* Newsletter form button */

.newsletter-form-button {
   font-family: 'Favorit light' !important;
}
.newsletter-form-button-label {
   font-family: 'Favorit light' !important;
      text-transform: none;
}

/*Buttons*/
.sqs-block-button-element {
    font-family: 'Favorit regular' !important;
}
input.button.sqs-system-button.sqs-editable-button {
    font-family: 'Favorit light';
  text-transform: none;
}

/*Mobile menu*/

.Mobile-overlay-nav-item {
  font-family: 'Favorit regular' !important;
  letter-spacing: .13em !important;
}
.Mobile-overlay-folder-item--toggle {
  font-family: 'Favorit regular' !important;
  letter-spacing: .13em !important;
}
.Mobile-overlay-folder-item {
  font-family: 'Favorit regular' !important;
  letter-spacing: .13em !important;
}
 

Thanks!

Hi. What is access password?

@tuanphan my bad sorry. The site is public now 🙂

12 hours ago, Jani_dp said:

@tuanphan my bad sorry. The site is public now 🙂

 

Hi. If the font works, what should it look like?

This is the correct font. 

The incorrect font seems to show up on Internet Explorer (who even uses that nowadays, I know) and seems to default to a very ugly 'Times New Roman' type font.

Hi, did you get this fixed as this is also the exact same problem I am having on my site at the moment also? 

On 12/7/2022 at 6:56 PM, kerrywhee said:

Hi, did you get this fixed as this is also the exact same problem I am having on my site at the moment also? 

 

What is your site url? We can check your case easier

I am having the same issue on this website: https://twcrevelstoke.ca 

The CSS file I uploaded is:

/*Adding LEMONMILK font*/
@font-face {
font-family: 'LEMONMILK-Regular';
       src: url('Fonthttps://static1.squarespace.com/static/636d9c898618772fe5bf2869/t/6383ab3cbcba5f5263e4430c/1669573436499/LEMONMILK-Regular.otfURL'); 

@font-face {
  font-family:'LEMONMILK-Light'}
    src: url('Fonthttps://static1.squarespace.com/static/636d9c898618772fe5bf2869/t/6383ad104f4fdd08002f262a/1669573904571/LEMONMILK-Light.otf'); }
  
h1 {font-family: 'LEMONMILK-Regular';}
h2 {font-family: 'LEMONMILK-Regular';}
h3 {font-family: 'LEMONMILK-Light';}
h4 {font-family: 'LEMONMILK-Light';}

It's working for Chrome, but appearing differently on safari and when the client I built it for views the website from her devices. The correct fonts appear for me on mobile and desktop using Chrome. 

The font should look like this: 

Help is appreciated! 

On 12/21/2022 at 4:25 AM, Willoway said:

I am having the same issue on this website: https://twcrevelstoke.ca 

The CSS file I uploaded is:

/*Adding LEMONMILK font*/
@font-face {
font-family: 'LEMONMILK-Regular';
       src: url('Fonthttps://static1.squarespace.com/static/636d9c898618772fe5bf2869/t/6383ab3cbcba5f5263e4430c/1669573436499/LEMONMILK-Regular.otfURL'); 

@font-face {
  font-family:'LEMONMILK-Light'}
    src: url('Fonthttps://static1.squarespace.com/static/636d9c898618772fe5bf2869/t/6383ad104f4fdd08002f262a/1669573904571/LEMONMILK-Light.otf'); }
  
h1 {font-family: 'LEMONMILK-Regular';}
h2 {font-family: 'LEMONMILK-Regular';}
h3 {font-family: 'LEMONMILK-Light';}
h4 {font-family: 'LEMONMILK-Light';}

 

It's working for Chrome, but appearing differently on safari and when the client I built it for views the website from her devices. The correct fonts appear for me on mobile and desktop using Chrome. 

The font should look like this: 

 

Help is appreciated! 

Remove text "Font" and "URL" from 2 urls

I'm having the same issue with font displaying differently. Please can you help. I've got two sites that I'm having this issue with.

https://www.colliersfarm.uk/

@font-face {
font-family: 'Mosthat';  
src: url(https://static1.squarespace.com/static/62fd0cb6da573b3b72919b9c/t/62fd15137902cb701bb8d85f/1660753171867/Mosthat.otf), url(https://static1.squarespace.com/static/62fd0cb6da573b3b72919b9c/t/62fd151ebb461525f54a3be8/1660753182699/mosthat-webfont.woff), url(https://static1.squarespace.com/static/62fd0cb6da573b3b72919b9c/t/62fd15238f6f734b50179cec/1660753187720/mosthat-webfont.woff2
);
}

h1, {
font-family: 'Poppins-Bold';
}
h2, h3, h4, {
font-family: 'Poppins-Semibold';
}

.homepage .page-section:first-child.vertical-alignment--bottom:not( .content-collection ):not( .gallery-section ):not( .user-items-list-section ):not( .section-height--custom ) > .content-wrapper,
.homepage .page-section:first-child .sqs-col-5 .sqs-block-image

  {
  
    padding-bottom : 0;
    
    }

On 4/24/2023 at 5:59 PM, Colliersfarm said:

I'm having the same issue with font displaying differently. Please can you help. I've got two sites that I'm having this issue with.

https://www.colliersfarm.uk/

@font-face {
font-family: 'Mosthat';  
src: url(https://static1.squarespace.com/static/62fd0cb6da573b3b72919b9c/t/62fd15137902cb701bb8d85f/1660753171867/Mosthat.otf), url(https://static1.squarespace.com/static/62fd0cb6da573b3b72919b9c/t/62fd151ebb461525f54a3be8/1660753182699/mosthat-webfont.woff), url(https://static1.squarespace.com/static/62fd0cb6da573b3b72919b9c/t/62fd15238f6f734b50179cec/1660753187720/mosthat-webfont.woff2
);
}

h1, {
font-family: 'Poppins-Bold';
}
h2, h3, h4, {
font-family: 'Poppins-Semibold';
}

.homepage .page-section:first-child.vertical-alignment--bottom:not( .content-collection ):not( .gallery-section ):not( .user-items-list-section ):not( .section-height--custom ) > .content-wrapper,
.homepage .page-section:first-child .sqs-col-5 .sqs-block-image

  {
  
    padding-bottom : 0;
    
    }

These font-family need to be same

Screenshot: https://prnt.sc/2Z2kwYDhBHLk