Custom font not working, even with !important

Hello, 

I'm trying to use Adieu font for paragraph styles. I've used the following CSS and uploaded the WOFF file but it's not working. Any help would be greatly appreciated.

@font-face {
    font-family: 'Adieu';
    src: url('https://static1.squarespace.com/static/652da6f7ed2ba3418ddb5d19/t/663103af16c564615b00c09a/1714488239820/Adieu-Light.woff');

p { 
font-family: 'Adieu', sans-serif !important;
font-style: normal;
}
 

Can you share your website URL? and password if you website isn't live?

3 minutes ago, suzanne said:

Any help would be greatly appreciated.

You are missing a closing bracket from your CSS code, try this instead:

@font-face {
  font-family: 'Adieu';
  src: url('https://static1.squarespace.com/static/652da6f7ed2ba3418ddb5d19/t/663103af16c564615b00c09a/1714488239820/Adieu-Light.woff');
}

p { 
  font-family: 'Adieu', sans-serif;
}

Thank you, @Ziggy. That didn't seem to help. It seems neither of the Adobe Typekit fonts are loading. Here's the code below and a link to the site: https://www.geographiesofdigitalwasting.com/home-new:

/*
@font-face {
  font-family: 'Adieu';
  src: url('https://static1.squarespace.com/static/652da6f7ed2ba3418ddb5d19/t/663103af16c564615b00c09a/1714488239820/Adieu-Light.woff');
}

@font-face {
    font-family: 'neue-haas-grotesk-text';
    src: url('https://use.typekit.net/cfx2jli.css');
}

@font-face {
    font-family: 'ibm-plex-mono';
    src: url('https://use.typekit.net/cfx2jli.css');
}
*/

p { 
font-family: 'Adieu', sans-serif !important;
font-style: normal;
line-height: 1.6;
}

h1 { 
font-family: 'neue-haas-grotesk-display', sans-serif;
font-weight: 500;
font-style: normal;
font-size: 108px;
letter-spacing: -1px !important;
}

h2 { 
font-family: "neue-haas-grotesk-display", sans-serif !important;
font-weight: 900 !important;
font-size: 68px;
font-style: normal;
letter-spacing: -3px !important;
}

h4 { 
font-family: 'Adieu', sans-serif !important;
font-style: normal;
line-height: 1.6;
font-size: 14px;
color: #F7551C;
}

.sqs-block-button .sqs-block-button-element--medium {
font-family: "ibm-plex-mono", sans-serif !important;
font-weight: 500;
font-style: normal;
letter-spacing: 1px !important;
}

@suzanne Please add this css code to : Website > Website Tools > Custom CSS

I have checked from my side and it works perfectly. I think, you added the css on wrong place. Can you try again?

@font-face {
    font-family: 'Adieu';
    src: url('https://static1.squarespace.com/static/652da6f7ed2ba3418ddb5d19/t/663103af16c564615b00c09a/1714488239820/Adieu-Light.woff');
}

p {
    font-family: 'Adieu', sans-serif !important;
    font-style: normal;
}
 

What?! I had no idea! @Ziggy Thank you so much for this! I really, really appreciate it. The only other thing is that the buttons aren't set in the right font. What am I missing here?

4 minutes ago, suzanne said:

Thank you so much for this! I really, really appreciate it. 

Glad to help! Can you mark my post as the solution and give it a like? Thanks!

@Ziggy Just one more thing. Are you able to see why the buttons aren't reading the IBM font?

You have the wrong quote marks, you should be using the single not double around the font family name.

Like this:

.sqs-block-button .sqs-block-button-element--medium {
  font-family: 'ibm-plex-mono', sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 1px;
}

@Ziggy Tried changing the quotes. Not seeing a change....

14 hours ago, suzanne said:

@font-face {
    font-family: 'ibm-plex-mono';
    src: url('https://use.typekit.net/cfx2jli.css');
}

I think you need to upload a font file rather than use this  source URL.

Download then upload the font to your website and add the URL to the source.

https://fonts.google.com/specimen/IBM+Plex+Mono