Jump to content

Font is not displayed correctly on some devices or networks

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 3
  • Views 605
  • Created
  • Last Reply

Top Posters In This Topic

Hello @PabloHamburg,

Let me try to help you out. It's really important to carefully check your code when uploading a custom font—there might be something missing. But guess what? We have a blog post that covers this exact topic! Check it out here: https://www.sparkplugin.com/blog/custom-fonts-in-squarespace.

Give it a look and let me know how it goes!

 

- Answered by Iuno from sparkplugin.com

forumsignature-recommendedcopy2.png.0579645eb1430dc7c1059541dc6456c6.png

Link to comment
Hey, thanks for your feedback. I tried again and found no discrepancy in the code. I also uploaded the font again but it doesn't work. The font displays on my smartphone, but not on desktop browsers.
That had worked before, but not anymore. Now also i get a Syntax error but i cant't find out why. 
Do you have any idea why?
I should stick to social work, coding is not my business...
Thank you very much.

 

The complete code is:

 

@font-face {
font-family: 'Metropolis-Regular';
src: url(https://static1.squarespace.com/static/58ba88a26a4963d651adac6d/t/66f6fecd0c8c0d4d30a33878/1727463118076/Metropolis-Regular.ttf);
}



@font-face {
font-family: 'Metropolis-Light';
src: url(https://static1.squarespace.com/static/58ba88a26a4963d651adac6d/t/66f6ff20ab658a107a7a2d03/1727463200464/Metropolis-Light.ttf);
}


@font-face {
font-family: 'Metropolis-ExtraLight';
src: url(https://static1.squarespace.com/static/637d2b44fffad314ae0a69fd/t/6381222428fbc54453243e16/1669407270170/Metropolis-ExtraLight.ttfhttps://static1.squarespace.com/static/58ba88a26a4963d651adac6d/t/66f6ff43589f8d0b78641669/1727463235894/Metropolis-ExtraLight.ttf);
}


@font-face {
font-family: 'Metropolis-Thin';
src: url(https://static1.squarespace.com/static/58ba88a26a4963d651adac6d/t/66f6ff6024b38a735517e8fd/1727463264917/Metropolis-Thin.ttf);
}


h1 {
font-family:'Metropolis-Regular'!important;
 }

h2, h3, h4 {
font-family:'Metropolis-Regular';
}

 

p {
font-family: 'Metropolis-Regular'!important;
}      


.sqsrte-large {
font-family: 'Metropolis-Regular';
}

.sqsrte-small {
font-family: 'Metropolis-Regular';
}

.sqs-block-button-element--large {
font-family: 'Metropolis-Regular';
}

.sqs-block-button-element {
  font-family: 'Metropolis-Light' !important;
}

.sqs-block-button-element--medium {
font-family: 'Metropolis-Regular';
}

.sqs-block-button-element--small {
font-family: 'Metropolis-Regular';
}

 

.header-nav *, nav.header-menu-nav-list * {
    font-family: 'Metropolis-Regular'!important;
}

/* Font Nav */
div #topNav a {
  font-family: 'Metropolis-Regular' !important; }

 /* Custom Font - Site Title */

.logo.site-title a {
   font-family: 'Metropolis-Light' !important;
}

header#header *, .mobile-bar-wrapper *, p {
    font-family: 'Metropolis-Regular' !important;
}

header#header *, .mobile-bar-wrapper *, h1, h2, h3 {
    font-family: 'Metropolis-Light' !important;
}


.Code Block{
font-family: 'Montserrat-ExtraLight';
}

nav#main-navigation ul li a {
  font-family: 'Metropolis-Regular';
}

nav#mobile-navigation ul li a {
  font-family: 'Metropolis-Regular';
}


h1 {
    font-weight: !important;
}

 

 

Link to comment
  • Solution

Extra Light has invalid font face code, it should be

@font-face {
  font-family: 'Metropolis-ExtraLight';
  src: url(https://static1.squarespace.com/static/637d2b44fffad314ae0a69fd/t/6381222428fbc54453243e16/1669407270170/Metropolis-ExtraLight.ttf);
}

 

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.