cfostlund

Didn't work. The work sans overwrites the Sombra font 😞 Any other ideas?

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