Jump to content

Custom CSS Squarespace font not working on mobile

Recommended Posts

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!
 

Link to comment
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

 

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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?

Link to comment
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.

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment

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!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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