Custom Font not showing up on any other device

I found out that custom fonts of Creative Market are hard to install on Squarespace websites because of the host (?). Also wasn't able to upload it to Adobe Fonts so I ended up installing another font from Adobe and that one does show. 

If anyone knows how to get a font from Creative Market working, then I'd love to hear 🙂

On 1/30/2023 at 1:42 AM, vidrie said:

I found out that custom fonts of Creative Market are hard to install on Squarespace websites because of the host (?). Also wasn't able to upload it to Adobe Fonts so I ended up installing another font from Adobe and that one does show. 

If anyone knows how to get a font from Creative Market working, then I'd love to hear 🙂

If you share a Creative Market Font, we can check easier

Hi there! Also having some issues with an uploaded font (AyerPosterCursive) showing up on my browser but not on my mobile phone. Help would be appreciated!

Here is the CSS

p {
  margin-top: -35px !important;
@font-face {
font-family: 'Ayer Poster Cursive Web Regular';
src: url('https://static1.squarespace.com/static/615c78afd08fc919434a2a68/t/638e6effb9bd773f916a04ac/1670278911590/AyerPosterCursive-RegularItalic-Web%5B1%5D.woff2') format('woff2'),
url('https://static1.squarespace.com/static/615c78afd08fc919434a2a68/t/638e6edb0f848d6fdddb3749/1670278875768/AyerPosterCursive-RegularItalic-Web%5B1%5D.woff') format('woff');
font-weight: 700;
font-style: italic;
font-stretch: normal;
}

On 2/18/2023 at 10:14 AM, jwash said:

Hi there! Also having some issues with an uploaded font (AyerPosterCursive) showing up on my browser but not on my mobile phone. Help would be appreciated!

Here is the CSS

p {
  margin-top: -35px !important;
@font-face {
font-family: 'Ayer Poster Cursive Web Regular';
src: url('https://static1.squarespace.com/static/615c78afd08fc919434a2a68/t/638e6effb9bd773f916a04ac/1670278911590/AyerPosterCursive-RegularItalic-Web%5B1%5D.woff2') format('woff2'),
url('https://static1.squarespace.com/static/615c78afd08fc919434a2a68/t/638e6edb0f848d6fdddb3749/1670278875768/AyerPosterCursive-RegularItalic-Web%5B1%5D.woff') format('woff');
font-weight: 700;
font-style: italic;
font-stretch: normal;
}

Use this code

@font-face {
font-family: 'Ayer Poster Cursive Web Regular';
src: url('https://static1.squarespace.com/static/615c78afd08fc919434a2a68/t/638e6effb9bd773f916a04ac/1670278911590/AyerPosterCursive-RegularItalic-Web%5B1%5D.woff2') format('woff2');
src: url('https://static1.squarespace.com/static/615c78afd08fc919434a2a68/t/638e6edb0f848d6fdddb3749/1670278875768/AyerPosterCursive-RegularItalic-Web%5B1%5D.woff') format('woff');
font-weight: 700;
font-style: italic;
font-stretch: normal;
}
p {
  margin-top: -35px !important;
font-family: 'Ayer Poster Cursive Web Regular';
}

When in the editor the fonts look all good, but when viewed on other devices both desktop and mobile the OHNO SOFTIE font is replaced with a serif font. Is there something wrong with my code?

site: https://whatsthejuice.shop/

password: whatsthejuice

@font-face {
font-family:OHNO SOFTIE;
src:url(https://static1.squarespace.com/static/639807d76497d03b8cc7a627/t/63b66d0d4e623a274928733b/1672899853641/OhnoSoftie-Bold.otf);
}

h1 {
font-family: 'OHNO SOFTIE';
}

h2 {
font-family: 'OHNO SOFTIE';
}

h3 {
font-family: 'OHNO SOFTIE';
}

h4 {
font-family: 'OHNO SOFTIE';
}

h1.ProductItem-details-title {
    font-family: 'Softiehttps://static1.squarespace.com/static/63b679bf9df33861701cc385/t/63b67a631570875a397d720f/1672903267625/OhnoSoftie-Bold.otf' !important;
}

On 4/15/2023 at 3:45 AM, aliarz said:

When in the editor the fonts look all good, but when viewed on other devices both desktop and mobile the OHNO SOFTIE font is replaced with a serif font. Is there something wrong with my code?

site: https://whatsthejuice.shop/

password: whatsthejuice

@font-face {
font-family:OHNO SOFTIE;
src:url(https://static1.squarespace.com/static/639807d76497d03b8cc7a627/t/63b66d0d4e623a274928733b/1672899853641/OhnoSoftie-Bold.otf);
}

h1 {
font-family: 'OHNO SOFTIE';
}

h2 {
font-family: 'OHNO SOFTIE';
}

h3 {
font-family: 'OHNO SOFTIE';
}

h4 {
font-family: 'OHNO SOFTIE';
}

h1.ProductItem-details-title {
    font-family: 'Softiehttps://static1.squarespace.com/static/63b679bf9df33861701cc385/t/63b67a631570875a397d720f/1672903267625/OhnoSoftie-Bold.otf' !important;
}

Password incorrect. Can you check it again?

Hi there, 

I'm also having this issue. However my fonts only show up on my device, not everyone else's. I'm assuming it's because I have the font downloaded on my laptop and no one else does on their device?

Website: echodigitalcoms.com

Current Code: 

@font-face {
font-family: VENEER;
src: url(https://static1.squarespace.com/static/6466969ae5822c06cff748bb/t/646d397dc6ef5967cd1a63fb/1684879741467/VeneerCleanReg.otf);
}
h1 {
font-family:'VENEER';
}

h2 {
font-family:'VENEER';
}

h3 {
font-family:'VENEER';
}

h4 {
font-family:'VENEER';
}

.sqsrte-large {
font-family:'VENEER';
}

p {
font-family:'VENEER';
}

.sqsrte-small {
font-family: 'VENEER';
}
// Small or Tertiary Button //
.sqs-block-button-element--small,  .sqs-button-element--tertiary {
  font-family:'VENEER'!important;
}

// Medium or Primary Button //
.sqs-block-button-element--medium, .sqs-button-element--primary {
  font-family: 'VENEER' !important;
}

// Large or Secondary Button //
.sqs-block-button-element--large, .sqs-button-element--secondary {
  font-family: 'VENEER' !important;
}
p {
    font-family: 'VENEER' !important;
}

Please help!!

On 6/20/2023 at 7:51 AM, Jalhammouri said:

Hi there, 

 

I'm also having this issue. However my fonts only show up on my device, not everyone else's. I'm assuming it's because I have the font downloaded on my laptop and no one else does on their device?

 

Website: echodigitalcoms.com

 

Current Code: 

 

@font-face {
font-family: VENEER;
src: url(https://static1.squarespace.com/static/6466969ae5822c06cff748bb/t/646d397dc6ef5967cd1a63fb/1684879741467/VeneerCleanReg.otf);
}
h1 {
font-family:'VENEER';
}

h2 {
font-family:'VENEER';
}

h3 {
font-family:'VENEER';
}

h4 {
font-family:'VENEER';
}

.sqsrte-large {
font-family:'VENEER';
}

p {
font-family:'VENEER';
}

.sqsrte-small {
font-family: 'VENEER';
}
// Small or Tertiary Button //
.sqs-block-button-element--small,  .sqs-button-element--tertiary {
  font-family:'VENEER'!important;
}

// Medium or Primary Button //
.sqs-block-button-element--medium, .sqs-button-element--primary {
  font-family: 'VENEER' !important;
}

// Large or Secondary Button //
.sqs-block-button-element--large, .sqs-button-element--secondary {
  font-family: 'VENEER' !important;
}
p {
    font-family: 'VENEER' !important;
}

 

Please help!!

Because this font url doesn't exist. You can check & upload new line

Hi there,

I have the same issues and it's driving me insane. URL is www.alexiademicheli.com

Here's screenshots to illustrate what I mean; on the left is the correct custom font as it appears on my laptop, and on the right the wrong font as it appears on my iMac.

Here's the custom CSS I've used;

 

@font-face {
    font-family: 'CarefreeSerif-Light' !important;
    src: url('FontURLhttps://static1.squarespace.com/static/6177d20eb97f2131e81751d3/t/64ef06c2f241061ffc8834f3/1693386434272/CarefreeSerif-Light.otf');
  }

h1 {font-family: 'CarefreeSerif-Light' !important;}
h2 {font-family: 'CarefreeSerif-Light' !important;}

// Primary Button //
.sqs-block-button-element--medium, .sqs-button-element--primary {
  font-family: 'CarefreeSerif-Regular' !important;
}

// Secondary Button //
.sqs-block-button-element--large, .sqs-button-element--secondary {
  font-family: 'CarefreeSerif-Regular' !important;
}

// Tertiary Button //
.sqs-block-button-element--small,  .sqs-button-element--tertiary {
  font-family: 'Acumin Pro SemiBold' !important;
}

@font-face {
    font-family: 'September Spirit' !important;
    src: url('https://static1.squarespace.com/static/6177d20eb97f2131e81751d3/t/64ef08f14faa3c7588a3eb85/1693386993242/September+Spirit.otf');
  }

h3 {font-family: 'September Spirit' !important;}
h4 {font-family: 'Acumin Pro Medium' !important;}

.Marquee * {
   font-family: 'September Spirit' !important;
  color: solid black !important;
  size: 50pt !important}

Let me know if I can clarify anything else! 

On 9/25/2023 at 6:26 AM, AlexiaD said:

I have the same issues

Your font-face rule-set has syntax errors. Use the following.

@font-face {

  font-family : 'CarefreeSerif-Light';
  src : url('https://static1.squarespace.com/static/6177d20eb97f2131e81751d3/t/64ef06c2f241061ffc8834f3/1693386434272/CarefreeSerif-Light.otf');
  
  }

Let us know how it goes.

That worked for H1, H2 and H3 thank you! I think there might be an issue with H4 though - I've tried formatting the code as per the one you sent but it didn't work. Haven't added url for H4 font as it is one from Squarespace. Here are the codes I use:

@font-face {

    font-family: 'September Spirit' !important;

       src: url('https://static1.squarespace.com/static/6177d20eb97f2131e81751d3/t/64ef08f14faa3c7588a3eb85/1693386993242/September+Spirit.otf');

  }

h3 {font-family: 'September Spirit' !important;}
h4 {font-family: 'Acumin Pro Medium' !important;}

Also have an issue with the buttons using H1/ H2 with these codes:

// Primary Button //
.sqs-block-button-element--medium, .sqs-button-element--primary {
  font-family: 'CarefreeSerif-Regular' !important;
}

// Secondary Button //
.sqs-block-button-element--large, .sqs-button-element--secondary {
  font-family: 'CarefreeSerif-Regular' !important;
}

Thanks so much for your help!

9 hours ago, AlexiaD said:

I think there might be an issue with H4 though

You added an !important to the @font-face font-family and that causes the issue.

@creedon great thank you. Same for the buttons?

6 hours ago, AlexiaD said:

Same for the buttons?

!important can be used for your buttons.

@creedon sorry the code doesn't work. I've tried both with/ without !important. Would you mind sharing the code you would use to make sure it displays correctly on every devices? Thank you!

5 hours ago, AlexiaD said:

sorry the code doesn't work. I've tried both with/ without !important. Would you mind sharing the code you would use to make sure it displays correctly on every devices?

You are referring to CarefreeSerif-Regular in your rulesets but you've not included the font in your site within a @font-face ruleset.