Custom CSS Squarespace font not working on mobile

Site URL: https://bison-scarlet-jabp.squarespace.com/

Hi! Total noob here but I managed to add some custom css to get the headlines in the fonts we want. Looks great in the squarespace preview both on mobile and desktop. But then in mobile IRL view fonts don't show. I have read through many similar forum questions with same issue but haven't found the solution for me. Seems many are using source code in shape of url to stabilize and define the code? But where do I find this?
 

This is my code right now:


h1 {

    font-family: din condensed;  

}
h2 {

    font-family: din condensed;  

}
h4 {

    font-family: aktiv-grotesk;  

}

But I've seen that some have solved it with @font-face and a code looking like this :
 

@font-face {
 font-family: 'Geared';
src: url(https://static1.squarespace.com/static/60b6d7b030f94f1039a30b3a/t/60b6db5f4848d052f2992a43/1622596447808/GearedSlab.ttf)
}

But how do I get my DIN Condensed font and the Aktiv Grotesk into these static URL's?

Please help this noob!
 

22 hours ago, Cira said:

Site URL: https://bison-scarlet-jabp.squarespace.com/

Hi! Total noob here but I managed to add some custom css to get the headlines in the fonts we want. Looks great in the squarespace preview both on mobile and desktop. But then in mobile IRL view fonts don't show. I have read through many similar forum questions with same issue but haven't found the solution for me. Seems many are using source code in shape of url to stabilize and define the code? But where do I find this?
 

This is my code right now:


h1 {

    font-family: din condensed;  

}
h2 {

    font-family: din condensed;  

}
h4 {

    font-family: aktiv-grotesk;  

}

But I've seen that some have solved it with @font-face and a code looking like this :
 

@font-face {
 font-family: 'Geared';
src: url(https://static1.squarespace.com/static/60b6d7b030f94f1039a30b3a/t/60b6db5f4848d052f2992a43/1622596447808/GearedSlab.ttf)
}

But how do I get my DIN Condensed font and the Aktiv Grotesk into these static URL's?

Please help this noob!
 

You can try the following steps

Thanks for the reply! Issue for me is that I don't have the font files since they are included in Squarespace 😞 so I can't upload them.

Is there anyway to reach the font files through Squarespace or at least get the url:s somehow?

On 7/15/2022 at 5:03 PM, Cira said:

I don't have the font files since they are included in Squarespace 😞 so I can't upload them.

If the font options are included with Squarespace, you shouldn't need any Custom CSS to load the fonts, so I'm a little confused about the issue. You should be able to add the required fonts (and their associated font files) by selecting them in the Site Styles panel for one or more elements.

I appreciate that when you first open the Fonts section of the styles panel it shows you the very 'top level' options like 'Font Packs' and it can seem very inflexible, but if you drill down into the detail you should be able to set a specific font for individual text elements by first selecting 'Custom'.

If you find an element on the site that you cannot easily change, first ensure that you are using the font for another element (so that Squarespace has loaded the relevant font file) and then add a line of CSS to assign that same font to the specific element. 

If you have difficulties doing this, please post back with details. A video showing the issue may also be very helpful. Loom is a free video screencast tool and can be downloaded here.

Attached a video about what I see. I have made some custom options but it doesn't help. It did quickly jump to the right font when I changed the Newsletter block but as soon as I saved it was back to wrong font. It's also so hard to know what change changes what. Seem to be quite limited options. I have created most of my blocks as a "blank" so it feels like I might need to redo the whole site with this option? So then question is, if it's jsut better to buy the fonts and upload them in custom files CSS?

I really appreciate your help, thank you so much!