emmaclo

Hey everyone -- I have absolutely 0 experience using CSS but Squarespace's out of the box font packs don't have anything I want to use. They have a 'Noto Serif' option, but not 'Noto Serif Display,' which is what I want. I've configured some custom CSS based on recommended code I found around the web and haven't been able to get the CSS to stick when I view my site on Safari or on mobile (which for me, by default, is Safari because I'm on iOS). It also doesn't display properly when I open the link via Instagram, etc. I ran onto another forum post about this that recommended double-checking naming conventions for the custom fonts. I've kept them all consistent so I don't know what else I'm doing wrong. (Probably something really obvious. 😅) Here's what I've got: @font-face { font-family: 'NotoSerifDisplay-VariableFont_wdth,wght'; src: url('https://static1.squarespace.com/static/65d91112b6071f2ddae29cab/t/65e3b0334687304c21bf8aa1/1709420603355/NotoSerifDisplay-VariableFont_wdth%2Cwght.ttf'); } h1 {font-family: 'NotoSerifDisplay-BoldItalic';} h2 {font-family: 'NotoSerifDisplay-Bold';} h3 {font-family: 'NotoSerifDisplay-Bold';} h4 {font-family: 'NotoSerifDisplay-Regular copy';} I'm also unsure if I need to set a new @font-face rule for every style of the header fonts or if this ^ is the way to do it. The source url goes to the only instance of the font that I uploaded, which is an aggregate of all the Noto Serif Display styles. Do I need to be adding individual source URLs for each of the styles I want to use? Attaching screenshots of what my H1 looks like on Chrome vs. Safari. Top is Chrome, bottom is Safari. (There's a weird cutoff thing happening on the Safari header as well. 🧐 Any insight would be SO appreciated!