Jump to content

Custom fonts overwrite each other

Recommended Posts

Site URL: https://www.tas.se/om-oss

Hi!

We are trying to use two different custom fonts in our design, we are far from experts in the CSS department, so we've just managed to create the code below using different topics in this forum and som google skills. 

Our problem might be obvious to you guys, but it seems like the Paragraph font (Work Sans) is overwritten by the Heading font (Sombra). The page you see now have the Work-sans custom css removed because this Paragraph font overrode the Heading instead 😄  It's a bit of a mess.

A side note to all this is that the Work Sans font is actually included in the Site Style, so my guess is that it should be needed in the CSS if the code for custom heading font was input correctly 🙂

It would be amazing if you guys could help me figure out how to solve this.

All the best,

Carl-Fredrik

 

Our try with two custom fonts:

@font-face {    

font-family: 'Sombra-regular';       

src: url('https://static1.squarespace.com/static/6086a5546091f33434858917/t/6086c92a9afd6e1a59ac2e7b/1619446058352/Sombra-Regular.woff');  }

* {

font-family: 'Sombra-regular' !important;

}



@font-face {    

font-family: 'Sombra-medium';       

src: url('https://static1.squarespace.com/static/6086a5546091f33434858917/t/6086aaa43341d07838dd5879/1619438244363/Sombra-Medium.woff2');  }

* {

font-family: 'Sombra-medium' !important;

}



@font-face {    

font-family: 'Sombra-bold';       

src: url('https://static1.squarespace.com/static/6086a5546091f33434858917/t/6086aa86df5e9a3c67452898/1619438214937/Sombra-Bold.woff2');  }

* {

font-family: 'Sombra-bold' !important;

}



@font-face {    

font-family: 'work-sans';       

src: url('https://static1.squarespace.com/static/6086a5546091f33434858917/t/6092ec98ee44cd1fa9551a75/1620241561852/WorkSans-VariableFont_wght.ttfhttps://static1.squarespace.com/static/6086a5546091f33434858917/t/6092ec98ee44cd1fa9551a75/1620241561852/WorkSans-VariableFont_wght.ttf');  }

* {

font-family: 'work-sans' !important;

}



h1 {font-family: 'Sombra-medium' !important;}

h2 {font-family: 'Sombra-medium' !important;}

h3 {font-family: 'Sombra-regular' !important;}



p {font-family: 'work-sans'!important;}



footer p {

  color: #808080 !important;

  font-family: 'sombra-medium'!important;

  text-decoration: none !important;

}



footer a {

  color: #808080 !important;

  font-family: 'sombra-medium';

  text-decoration: none !important;

}



h3.portfolio-title {

font-family: 'sombra-medium' !important;

}

Current code:

@font-face {    
font-family: 'Sombra-regular';       
src: url('https://static1.squarespace.com/static/6086a5546091f33434858917/t/6086c92a9afd6e1a59ac2e7b/1619446058352/Sombra-Regular.woff');  }
* {
	font-family: 'Sombra-regular' !important;
}

@font-face {    
font-family: 'Sombra-medium';       
src: url('https://static1.squarespace.com/static/6086a5546091f33434858917/t/6086aaa43341d07838dd5879/1619438244363/Sombra-Medium.woff2');  }
* {
	font-family: 'Sombra-medium' !important;
}

@font-face {    
font-family: 'Sombra-bold';       
src: url('https://static1.squarespace.com/static/6086a5546091f33434858917/t/6086aa86df5e9a3c67452898/1619438214937/Sombra-Bold.woff2');  }
* {
	font-family: 'Sombra-bold' !important;
}


h1 {font-family: 'Sombra-medium' !important;}
h2 {font-family: 'Sombra-medium' !important;}
h3 {font-family: 'Sombra-regular' !important;}

footer p {
  color: #808080 !important;
  font-family: 'sombra-medium'!important;
  text-decoration: none !important;
}

footer a {
  color: #808080 !important;
  font-family: 'sombra-medium';
  text-decoration: none !important;
}

h3.portfolio-title {
 font-family: 'sombra-medium' !important;
}

 

Link to comment
  • Replies 3
  • Views 808
  • Created
  • Last Reply
3 hours ago, cfostlund said:

Didn't work. The work sans overwrites the Sombra font 😞

Any other ideas?

It looks like you removed work-sans fon-face? Have you declared font-face for work sans yet? and which element you want to use work sans?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.