Custom fonts overwrite each other

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;
}

Try adding this to Last Line in Custom CSS

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

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

Any other ideas?

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?