Custom CSS Font Problems

Alright so just keep in mind, I have no coding background other then some "intro to Python" type courses.

So our brand has custom fonts. I want them to be in use on our website. I've been starting with the "Lexington" format. I got the custom CSS to work and control H1, H2 and so on... it appears to work fine in the text I'm looking at. I think I get it all figured out, but I scroll down and notice none of the other text has changed. If I try and change the Heading/Paragraph type now it just bugs out and doesn't allow me to change anything. It also only changes the Heading text for the top bit of text and not on the rest of the page. So far as I can see there's no errors showing in the code - so what gives?

/* Custom Fonts */
/* Header 1 Nimbus */
@font-face {
    font-family: Nimbus;
    src:     url(https://static1.squarespace.com/static/673cd7c47ecb9833e1ac4bda/t/673ce2aaf833685ec4aee8a8/1732043434938/TAN-NIMBUS.otf);
}
h1 {
    font-family: 'Nimbus';

/* Header 2 Dreamboat */

@font-face {
    font-family: Dreamboat;
    src: url(https://static1.squarespace.com/static/673cd7c47ecb9833e1ac4bda/t/673ce2a28a77fe40d728079f/1732043426429/TAYDreamboat.otf);
} 
h2 {
    font-family: 'Dreamboat';
}
  
/* Header 3 Dreamboat-Thin */
  
@font-face {
    font-family: Dreamboat-Thin;
    src: url(https://static1.squarespace.com/static/673cd7c47ecb9833e1ac4bda/t/673ce2a27583e2736115d437/1732043426432/TAYDreamboat-Thin.otf);
} 
}
h3 {
    font-family: 'Deamboat-Thin';
}

/* Paragraph 2 */

@font-face {
    font-family: Maison-NeueMono;
    src: url(https://static1.squarespace.com/static/673cd7c47ecb9833e1ac4bda/t/673ced9f7b2146044a038daf/1732046239908/MaisonNeue-Mono.ttf);
} 

p {
    font-family: 'Maison-NeueMono';
}

/* Paragraph 3 */

@font-face {
    font-family: Maison-NeueMedium;
    src: url(https://static1.squarespace.com/static/673cd7c47ecb9833e1ac4bda/t/673ceda250d1cd7a7dced491/1732046242484/MaisonNeue-Medium.ttf);
} 

.sqsrte-small {
    font-family: 'Maison-NeueMedium';
}

/* Header title text */

.header-title-text {
  font-family: 'Dreamboat';
}

/* Header navigation text */

.header .header-nav-wrapper a, .header .language-item a {
  font-family: 'Maison-NeueMedium';
}

/* Header login text */

.user-accounts-link.loaded .user-accounts-text-link {
    font-family: 'Maison-NeueMedium';
}

/* Header cart text */

.header .cart-text-link {
  font-family: 'Maison-NeueMedium';
}

I would also happily give you a link to the website however that's another thing that I can't seem to get working. The website just gives me a DNS error even though I use a domain through squarespace and have published it. 

Thanks for the help in advance!!

Hello @LuckyFrog, I have updated your code, please replace with this one, if it still doesn’t work, check out our blog post here to make sure you’re doing it the right way:)

/* Custom Fonts */

/* Header 1 Nimbus */
@font-face {
    font-family: Nimbus;
    src: url(https://static1.squarespace.com/static/673cd7c47ecb9833e1ac4bda/t/673ce2aaf833685ec4aee8a8/1732043434938/TAN-NIMBUS.otf) !important; 
    /*
    1. `font-family: Nimbus`: Assigns a custom name to the font for later use.
    2. `src`: Provides the location of the font file. Ensure the link remains active.
    3. `!important`: Overrides other font definitions for consistent application.
    */
}
h1 {
    font-family: 'Nimbus' !important; 
    /* Applies the Nimbus font to all `<h1>` elements */
}

/* Header 2 Dreamboat */
@font-face {
    font-family: Dreamboat;
    src: url(https://static1.squarespace.com/static/673cd7c47ecb9833e1ac4bda/t/673ce2a28a77fe40d728079f/1732043426429/TAYDreamboat.otf) !important;
    /* 
    1. `font-family: Dreamboat`: Assigns a name to the Dreamboat font.
    2. `src`: URL path to the font file hosted on Squarespace.
    */
} 
h2 {
    font-family: 'Dreamboat' !important; 
    /* Ensures Dreamboat font is used for `<h2>` elements */
}

/* Header 3 Dreamboat-Thin */
@font-face {
    font-family: Dreamboat-Thin;
    src: url(https://static1.squarespace.com/static/673cd7c47ecb9833e1ac4bda/t/673ce2a27583e2736115d437/1732043426432/TAYDreamboat-Thin.otf) !important; 
    /* Loads the thin-weight version of Dreamboat */
} 
h3 {
    font-family: 'Dreamboat-Thin' !important; 
    /* Ensures `<h3>` tags use Dreamboat-Thin */
}

/* Paragraph 2 */
@font-face {
    font-family: Maison-NeueMono;
    src: url(https://static1.squarespace.com/static/673cd7c47ecb9833e1ac4bda/t/673ced9f7b2146044a038daf/1732046239908/MaisonNeue-Mono.ttf) !important; 
    /* Mono-style font for specific text areas */
} 
p {
    font-family: 'Maison-NeueMono' !important; 
    /* Sets Maison-NeueMono as the font for `<p>` elements */
}

/* Paragraph 3 */
@font-face {
    font-family: Maison-NeueMedium;
    src: url(https://static1.squarespace.com/static/673cd7c47ecb9833e1ac4bda/t/673ceda250d1cd7a7dced491/1732046242484/MaisonNeue-Medium.ttf) !important; 
    /* Medium-weight version of Maison-Neue */
} 
.sqsrte-small {
    font-family: 'Maison-NeueMedium' !important; 
    /* Applies this font to small text elements */
}

/* Header title text */
.header-title-text {
    font-family: 'Dreamboat' !important; 
    /* Makes header titles use the Dreamboat font */
}

/* Header navigation text */
.header .header-nav-wrapper a, .header .language-item a {
    font-family: 'Maison-NeueMedium' !important; 
    /* Sets navigation and language link font to Maison-NeueMedium */
}

/* Header login text */
.user-accounts-link.loaded .user-accounts-text-link {
    font-family: 'Maison-NeueMedium' !important; 
    /* Ensures login-related text uses this font */
}

/* Header cart text */
.header .cart-text-link {
    font-family: 'Maison-NeueMedium' !important; 
    /* Ensures cart link uses this consistent font style */
}

Yes! That works wonders. Thanks so much for your help. Looks like I missed a few details and your code will be very helpful for future changes.

Now if only I can get the website to actually display on the domain when I need it to. 🙂

Also, upon further inspection it feels like there's still issues. 

So this is heading one font which is correct.

However, h2 still seems to come out like this. 

Which is incorrect, it should be the dreamboat font. This is just the default format font. 

I also used your blog post as my initial tutorial and basically just used your code copied and pasted. So I'm not really sure what else I can change?

Hello @LuckyFrog, As for the DNS, I’d recommend reaching out to Squarespace Support for better assistance, they’ll be able to guide you through it effectively.  Regarding the H2 issue, could you share the font file you uploaded to your Squarespace site? This will help me try to reproduce the issue on my end and assist you more accurately.  Thank you:)

Sure! 

https://drive.google.com/drive/folders/1s-TUvS3NW4UzqncUWkuLcOldHH1N8KD4?usp=sharing

The forum won't allow the filetype to be uploaded but this drive link should work for you. Dreamboat and Dreamboat-Thin should be H2 and H3 respectively.

Hello @LuckyFrog, I updated the code, this should work now. See how it goes.

/* Custom Fonts */

/* Header 1 Nimbus */
@font-face {
    font-family: Nimbus;
    src: url(https://static1.squarespace.com/static/673cd7c47ecb9833e1ac4bda/t/673ce2aaf833685ec4aee8a8/1732043434938/TAN-NIMBUS.otf) !important; 
    /*
    1. `font-family: Nimbus`: Assigns a custom name to the font for later use.
    2. `src`: Provides the location of the font file. Ensure the link remains active.
    3. `!important`: Overrides other font definitions for consistent application.
    */
}
h1 {
    font-family: 'Nimbus' !important; 
    /* Applies the Nimbus font to all `<h1>` elements */
}

/* Header 2 Dreamboat */
@font-face {
    font-family: Dreamboat;
    src: url(https://static1.squarespace.com/static/66fe77383a1f957a96cef620/t/67403513c6ad9161bcc68a65/1732261139385/TAYDreamboat.otf);
    /* 
    1. `font-family: Dreamboat`: Assigns a name to the Dreamboat font.
    2. `src`: URL path to the font file hosted on Squarespace.
    */
} 
h2 {
    font-family: 'Dreamboat' !important; 
    /* Ensures Dreamboat font is used for `<h2>` elements */
}

/* Header 3 Dreamboat-Thin */
@font-face {
    font-family: Dreamboat-Thin;
    src: url(https://static1.squarespace.com/static/66fe77383a1f957a96cef620/t/6740351348dd7a5bfa5f768b/1732261139290/TAYDreamboat-Thin.otf); 
    /* Loads the thin-weight version of Dreamboat */
} 
h3 {
    font-family: 'Dreamboat-Thin' !important; 
    /* Ensures `<h3>` tags use Dreamboat-Thin */
}

/* Paragraph 2 */
@font-face {
    font-family: Maison-NeueMono;
    src: url(https://static1.squarespace.com/static/673cd7c47ecb9833e1ac4bda/t/673ced9f7b2146044a038daf/1732046239908/MaisonNeue-Mono.ttf) !important; 
    /* Mono-style font for specific text areas */
} 
p {
    font-family: 'Maison-NeueMono' !important; 
    /* Sets Maison-NeueMono as the font for `<p>` elements */
}

/* Paragraph 3 */
@font-face {
    font-family: Maison-NeueMedium;
    src: url(https://static1.squarespace.com/static/673cd7c47ecb9833e1ac4bda/t/673ceda250d1cd7a7dced491/1732046242484/MaisonNeue-Medium.ttf) !important; 
    /* Medium-weight version of Maison-Neue */
} 
.sqsrte-small {
    font-family: 'Maison-NeueMedium' !important; 
    /* Applies this font to small text elements */
}

/* Header title text */
.header-title-text {
    font-family: 'Dreamboat' !important; 
    /* Makes header titles use the Dreamboat font */
}

/* Header navigation text */
.header .header-nav-wrapper a, .header .language-item a {
    font-family: 'Maison-NeueMedium' !important; 
    /* Sets navigation and language link font to Maison-NeueMedium */
}

/* Header login text */
.user-accounts-link.loaded .user-accounts-text-link {
    font-family: 'Maison-NeueMedium' !important; 
    /* Ensures login-related text uses this font */
}

/* Header cart text */
.header .cart-text-link {
    font-family: 'Maison-NeueMedium' !important; 
    /* Ensures cart link uses this consistent font style */
}