Jump to content

Changing the Banner Text

Recommended Posts

Site URL: https://www.fullcircuitfitness.com/

I would like my Banner header font to be a custom font to match my branding. I would like this font to appear on all banners. I used this custom code to achieve that.

/* banner custom font */
@font-face {
    font-family: 'Black Diamond';
    src: url('https://static1.squarespace.com/static/5fc61d5a322bbc4f9b09e559/t/5fd750b00f11661d4c48d01a/1607946437105/Black+Diamond.ttf');
}
.banner-thumbnail-wrapper .desc-wrapper * {
    font-family: 'Black Diamond';
}

However, this code is carrying over the custom font to the banner text as well. I would like the banner text to be the same as my H1 font throughout my site. Is it possible to specify this?

 

Thank you in advance!

Link to comment
  • Replies 9
  • Created
  • Last Reply
On 12/14/2020 at 10:38 PM, amybarn said:

Site URL: https://www.fullcircuitfitness.com/

I would like my Banner header font to be a custom font to match my branding. I would like this font to appear on all banners. I used this custom code to achieve that.

/* banner custom font */
@font-face {
    font-family: 'Black Diamond';
    src: url('https://static1.squarespace.com/static/5fc61d5a322bbc4f9b09e559/t/5fd750b00f11661d4c48d01a/1607946437105/Black+Diamond.ttf');
}
.banner-thumbnail-wrapper .desc-wrapper * {
    font-family: 'Black Diamond';
}

However, this code is carrying over the custom font to the banner text as well. I would like the banner text to be the same as my H1 font throughout my site. Is it possible to specify this?

 

Thank you in advance!

Please provide the site password

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 3 weeks later...

Hi there! I did not realize I had an answer to my question - thank you so much!! I wound up figuring out the banner text but it is not carrying over to my blog posts. Is there code that I can use so that this font is used for the titles of my blog posts in the banner as well as the titles on the main blog page? I am using the Hayden template.

Thank you in advance!!

Here is my URL and I took the passcode requirement off. 🙂

https://www.fullcircuitfitness.com/blog

Link to comment
10 hours ago, amybarn said:

Hi there! I did not realize I had an answer to my question - thank you so much!! I wound up figuring out the banner text but it is not carrying over to my blog posts. Is there code that I can use so that this font is used for the titles of my blog posts in the banner as well as the titles on the main blog page? I am using the Hayden template.

Thank you in advance!!

Here is my URL and I took the passcode requirement off. 🙂

https://www.fullcircuitfitness.com/blog

.sqs-featured-posts-gallery .gallery-wrapper .posts .post a,
article header h1 a {
    letter-spacing: 0em;
    font-family: 'Black Diamond',raleway !important;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
11 hours ago, amybarn said:

One more question....what about when I click on each individual post? I would love the banner font for each individual blog post to also be my custom font. Any chance you could help me with that as well? Thank you!!

 

Use this CSS

.post-title {
    font-family: 'Black Diamond',raleway !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
6 minutes ago, amybarn said:

 

I see some pages have very long content on mobile. You can consider adding a back to top button.

Also, you current back to top doesn't work. Just tested on tablet

Try replace #header link with #top

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

Archived

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.