Jump to content

Custom Fonts Not Working on Site

Go to solution Solved by Lesum,

Recommended Posts

Posted

I'm redoing my site and have new brand fonts I can't get to work with the CSS editor. Anyone know why? See code examples below: 
 

 

@font-face {


font-family: 'ZTBrosOskon90s-Regular' !important;

   src: url('<https://static1.squarespace.com/static/64238adf4228e2466d6da560/t/6642be787f856535e6c38532/1715650168879/ZTBrosOskon90s-Regular.woff>');

}

@font-face {


font-family: 'ZTBrosOskon90s-SemiExpanded';

   src: url('<https://static1.squarespace.com/static/64238adf4228e2466d6da560/t/6642be78b93d305e8709c9a4/1715650168860/ZTBrosOskon90s-SemiExpanded.woff2>');

}

@font-face {


font-family: 'ZTBrosOskon90s-Medium';

   src: url('<https://static1.squarespace.com/static/64238adf4228e2466d6da560/t/6642bde43606db63689556a5/1715650020762/ZTBrosOskon90s-Medium.woff2>');

}

@font-face {


font-family: 'ZTBrosOskon90s-BoldSemExp';

   src: url('<https://static1.squarespace.com/static/64238adf4228e2466d6da560/t/6642bd9f8f4326137e395f54/1715649951994/ZTBrosOskon90s-BoldSemExp.woff2>');

}


h1 {font-family: 'ZTBrosOskon90s-BoldSemExp' !important;}
h2 {font-family: 'ZTBrosOskon90s-Medium' !important;}
h3 {font-family: 'ZTBrosOskon90s-SemiExpanded' !important;}
.sqsrte-large {font-family: 'ZTBrosOskon90s-Regular' !important;}
p {font-family: 'ZTBrosOskon90s-Regular' !important;}
.sqsrte-small {font-family: 'ZTBrosOskon90s-Regular' !important;}


h1 {

font-family: 'ZTBrosOskon90s-BoldSemExp' !important;

font-weight: 400;
font-style: normal;
letter-spacing: 0em;
text-transform: none;
line-height: 1em;

}

h2 {
font-family: 'ZTBrosOskon90s-Medium' !important;
font-weight: normal;
font-style: normal;
letter-spacing: 0em;

}

h3 {

font-family: 'ZTBrosOskon90s-SemiExpanded' !important;
font-weight: 400;

}

.sqsrte-large {

font-family: 'ZTBrosOskon90s-Regular' !important;
font-weight: 500;
font-style: normal;
text-transform: none;

}

p {

font-family: 'ZTBrosOskon90s-Regular' !important;


font-style: none;
text-transform: none;

}


.header-nav *, nav.header-menu-nav-list * {
font-family: 'ZTBrosOskon90s-Regular'!important;
font-size: 19px;
text-transform: uppercase;
}

  • Solution
Posted

@KikiNicole Try removing the < > from url in the code. For instance, it should be like this:

@font-face {
	font-family: 'ZTBrosOskon90s-Regular' !important;
	src: url('https://static1.squarespace.com/static/64238adf4228e2466d6da560/t/6642be787f856535e6c38532/1715650168879/ZTBrosOskon90s-Regular.woff');
}

instead of this:

@font-face {
font-family: 'ZTBrosOskon90s-Regular' !important;
src: url('<https://static1.squarespace.com/static/64238adf4228e2466d6da560/t/6642be787f856535e6c38532/1715650168879/ZTBrosOskon90s-Regular.woff>');
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.