Jump to content

Custom font not displaying

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.ericavalera.com/

Hello!

I'm having issues with  my custom fonts not displaying on my website. Here's the code!

 

Any suggestions would be greatly appreciated!

@font-face {
 
font-family: 'Dahlia'; 
  src:url('https://static1.squarespace.com/static/60894342fa79b5525586a223/t/6255e04e15e22d58c7e6fca7/1649795150067/Dahlia-MediumCondensed.woff')format('woff'),
   url ('https://static1.squarespace.com/static/60894342fa79b5525586a223/t/6255e05bc6c4c90fb5103860/1649795163106/Dahlia-MediumCondensed.woff2') format('woff2'),
    url ('https://static1.squarespace.com/static/60894342fa79b5525586a223/t/6255e06ceb9b4b44f7f662ad/1649795180103/Dahlia-MediumCondensed.otf') format('opentype');
}

h1, h2 {
  font-family: 'Dahlia' !important;}

 

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 4/14/2022 at 2:09 AM, EricaV said:

Site URL: https://www.ericavalera.com/

Hello!

I'm having issues with  my custom fonts not displaying on my website. Here's the code!

 

Any suggestions would be greatly appreciated!

@font-face {
 
font-family: 'Dahlia'; 
  src:url('https://static1.squarespace.com/static/60894342fa79b5525586a223/t/6255e04e15e22d58c7e6fca7/1649795150067/Dahlia-MediumCondensed.woff')format('woff'),
   url ('https://static1.squarespace.com/static/60894342fa79b5525586a223/t/6255e05bc6c4c90fb5103860/1649795163106/Dahlia-MediumCondensed.woff2') format('woff2'),
    url ('https://static1.squarespace.com/static/60894342fa79b5525586a223/t/6255e06ceb9b4b44f7f662ad/1649795180103/Dahlia-MediumCondensed.otf') format('opentype');
}

h1, h2 {
  font-family: 'Dahlia' !important;}

 

Have you checked again by open the Incognito and access your site or just access the link with /?noredirect.

Currently, SQS has some bug on preview the site after adding Css code

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 4/14/2022 at 2:09 AM, EricaV said:

Site URL: https://www.ericavalera.com/

Hello!

I'm having issues with  my custom fonts not displaying on my website. Here's the code!

 

Any suggestions would be greatly appreciated!

@font-face {
 
font-family: 'Dahlia'; 
  src:url('https://static1.squarespace.com/static/60894342fa79b5525586a223/t/6255e04e15e22d58c7e6fca7/1649795150067/Dahlia-MediumCondensed.woff')format('woff'),
   url ('https://static1.squarespace.com/static/60894342fa79b5525586a223/t/6255e05bc6c4c90fb5103860/1649795163106/Dahlia-MediumCondensed.woff2') format('woff2'),
    url ('https://static1.squarespace.com/static/60894342fa79b5525586a223/t/6255e06ceb9b4b44f7f662ad/1649795180103/Dahlia-MediumCondensed.otf') format('opentype');
}

h1, h2 {
  font-family: 'Dahlia' !important;}

 

What is site access password?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...

Hi I am having the same issue on my site XD.NZ . Fine on desktop with font installed but not working on mobile or other devices.

Should look like this but showing a serif fontimage.png.c06094a8a88d2115952905235235b907.png

Any help appreciated!

// Fonts //
@font-face {
    font-family: 'Inter Display SemiBold';
src: url('https://static1.squarespace.com/static/62f8746d51b9095beb21e6c0/t/63366f5c342c323c792de3ff/1664511836422/InterDisplay-SemiBold.woff2');

font-family: 'inter Display Medium';
src: url('https://static1.squarespace.com/static/62f8746d51b9095beb21e6c0/t/63366f5124c4f44f7536b8c6/1664511826134/InterDisplay-Medium.woff2');

font-family: 'Inter Display Regular';
src: url('https://static1.squarespace.com/static/62f8746d51b9095beb21e6c0/t/63366f575546007641299fb8/1664511831762/InterDisplay-Regular.woff2');
}

// Headers
h1{font-family: 'Inter Display SemiBold';}
h2, h3, h4{font-family: 'Inter Display Medium';}

// Paragraphs //
.sqsrte-large {font-family: 'Inter Display Regular';}
p {font-family: 'Inter Display Regular';}
.sqsrte-small {font-family: 'Inter Display Regular';}

// Quotes
.sqs-block-quote blockquote {font-family: 'Inter Display Regular';}
.sqs-block-quote .source {font-family: 'Inter Display Regular';}

// Navigation
.header-nav-item a {font-family: 'Inter Display Regular';}
.header-menu-nav-item a {font-family: 'Inter Display Regular';}

// Small or Tertiary Button //
.sqs-block-button-element--small,  .sqs-button-element--tertiary {font-family: 'Inter Display Regular';}

// Medium or Primary Button //
.sqs-block-button-element--medium, .sqs-button-element--primary {font-family: 'Inter Display Regular';}

// Large or Secondary Button //
.sqs-block-button-element--large, .sqs-button-element--secondary {font-family: 'Inter Display Regular';}

// Forms //
.form-wrapper .field-list .title {font-family: 'Inter Display Regular';}

 

Edited by Format6
Link to comment
  • Solution
On 9/30/2022 at 11:31 AM, Format6 said:

Hi I am having the same issue on my site XD.NZ . Fine on desktop with font installed but not working on mobile or other devices.

Should look like this but showing a serif fontimage.png.c06094a8a88d2115952905235235b907.png

Any help appreciated!

// Fonts //
@font-face {
    font-family: 'Inter Display SemiBold';
src: url('https://static1.squarespace.com/static/62f8746d51b9095beb21e6c0/t/63366f5c342c323c792de3ff/1664511836422/InterDisplay-SemiBold.woff2');

font-family: 'inter Display Medium';
src: url('https://static1.squarespace.com/static/62f8746d51b9095beb21e6c0/t/63366f5124c4f44f7536b8c6/1664511826134/InterDisplay-Medium.woff2');

font-family: 'Inter Display Regular';
src: url('https://static1.squarespace.com/static/62f8746d51b9095beb21e6c0/t/63366f575546007641299fb8/1664511831762/InterDisplay-Regular.woff2');
}

// Headers
h1{font-family: 'Inter Display SemiBold';}
h2, h3, h4{font-family: 'Inter Display Medium';}

// Paragraphs //
.sqsrte-large {font-family: 'Inter Display Regular';}
p {font-family: 'Inter Display Regular';}
.sqsrte-small {font-family: 'Inter Display Regular';}

// Quotes
.sqs-block-quote blockquote {font-family: 'Inter Display Regular';}
.sqs-block-quote .source {font-family: 'Inter Display Regular';}

// Navigation
.header-nav-item a {font-family: 'Inter Display Regular';}
.header-menu-nav-item a {font-family: 'Inter Display Regular';}

// Small or Tertiary Button //
.sqs-block-button-element--small,  .sqs-button-element--tertiary {font-family: 'Inter Display Regular';}

// Medium or Primary Button //
.sqs-block-button-element--medium, .sqs-button-element--primary {font-family: 'Inter Display Regular';}

// Large or Secondary Button //
.sqs-block-button-element--large, .sqs-button-element--secondary {font-family: 'Inter Display Regular';}

// Forms //
.form-wrapper .field-list .title {font-family: 'Inter Display Regular';}

 

You need to use 3 font-face

@font-face {
    font-family: 'Inter Display SemiBold';
    src: url('https://static1.squarespace.com/static/62f8746d51b9095beb21e6c0/t/63366f5c342c323c792de3ff/1664511836422/InterDisplay-SemiBold.woff2');
}
@font-face {
	font-family: 'inter Display Medium';
    src: url('https://static1.squarespace.com/static/62f8746d51b9095beb21e6c0/t/63366f5124c4f44f7536b8c6/1664511826134/InterDisplay-Medium.woff2');
}
@font-face {
    font-family: 'Inter Display Regular';
    src: url('https://static1.squarespace.com/static/62f8746d51b9095beb21e6c0/t/63366f575546007641299fb8/1664511831762/InterDisplay-Regular.woff2')
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.