Struggling with custom font - Help me Obi Wan

Hello lovely people:

I'm currently working on a new template that isn't live but I have tried multiple times to use CSS to use Univers font.

The CSS code that I have plugged in is:

font-face {
font-family: 'UniversPro55Roman';
    src: url(https://static1.squarespace.com/static/64c959d4ce6f946ceb0f3ed5/t/64d29a960957214b829b6fde/1691523734533/UniversPro55Roman.woff);
}

Where did I go wrong? Help me Obi-Wan, you're my only hope.

If you're using a custom font there is more required than the code you've pasted above. In addition, it won't show up in the Site Styles font list that you've got in the screenshot above.

You'll need to change the code you pasted to below (with the @ at the start):

@font-face {
  font-family: 'UniversPro55Roman';
  src: url(https://static1.squarespace.com/static/64c959d4ce6f946ceb0f3ed5/t/64d29a960957214b829b6fde/1691523734533/UniversPro55Roman.woff);
}

Then you'll need to allocate the font to the relevant headings or paragraphs. If you wanted this font for all the headings and paragraph types, you would also need to add:

h1, h2, h3, h4, .sqsrte-large, p, .sqsrte-small {
  font-family: 'UniversPro55Roman' !important;
}

Thank you for your response Cass. Quick question. What if I only want to use Univers for certain areas like, "navigation and or just the paragraph and buttons"?

@astanec So for just those areas you'd be looking at this:

// Paragraphs //
.sqsrte-large, p, .sqsrte-small {
  font-family: 'UniversPro55Roman' !important;
}

// Buttons //
.sqs-block-button a, [class*='button'], [class*='btn'] {
  font-family: 'UniversPro55Roman' !important;
}

// Site Navigation //
.header-nav-item a {
  font-family: 'UniversPro55Roman' !important;
}