Jump to content

Trying to use a custom font for header:branding

Recommended Posts

Site URL: https://www.ninelives.net

Please help:
I'm trying to use a custom font for my header:branding in my Squarespace Website (So it's where you type in the name of your business).

The font "Roster Compressed Semibold" was there from the beginning as part of my website design, then one day it inexplicably disappeared. So I purchased it again, but now I don't know how to implement.
The code I tried is:

@font-face {

    font-family: 'RosterCompressed';

       src: url('FontURLhttps://static1.squarespace.com/static/5e65fd8479afc765168721e3/t/5f2da4140bb8936f5e442e5c/1596826644729/Roster+Compressed+Semibold.otf');


#header * {




 font-weight: 400;


then I tried:

#header h1.site-title { font-family: "RosterCompressed";



 font-weight: 400;


Neither of these changes anything
My default header:branding font remains set as ROBOTO SLAB

Also, ROBOTO SLAB looks like it should on desktop, but is a completely different font on mobile - no matter how many times I clear cache and refresh.


Link to comment
  • Replies 2
  • Views 292
  • Created
  • Last Reply

Use this CSS

@font-face {
    font-family: 'Rostercompressed';
    src: url('https://static1.squarespace.com/static/5e65fd8479afc765168721e3/t/5f2da4140bb8936f5e442e5c/1596826644729/Roster+Compressed+Semibold.otf')
a.Mobile-bar-branding, a.Header-branding {
    font-family: 'Rostercompressed' !important;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

THANK YOU Tuan !!!!!

(I have been struggling with this issue for 27 days - many many hours online trying to find the answer).


One more question please:
If I want a fraction more space between the Roster Compressed letters on my desktop - do I alter the CSS you provided? 
And, if so, please would you recommend what this code is?


Link to comment


This topic is now archived and is closed to further replies.

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