Jump to content

Custom font not showing up in all browsers

Recommended Posts

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!

Link to comment
  • Replies 11
  • Views 2.1k
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 year later...
  • 2 weeks later...

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: 

image.png.24cf4e27502dfea18b37ca1c6e9ae6e6.png108390871_ScreenShot2022-12-20at1_42_50PM.png.0376626ec4de2ee925f2996c86188485.png

 

Help is appreciated! 

Edited by Willoway
Updating
Link to comment
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: 

image.png.24cf4e27502dfea18b37ca1c6e9ae6e6.png108390871_ScreenShot2022-12-20at1_42_50PM.png.0376626ec4de2ee925f2996c86188485.png

 

Help is appreciated! 

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

image.thumb.png.c882cc4f929b6bfe9165319a077b8972.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...

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;
    
    }

Edited by Colliersfarm
Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.