Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Font Face: Change the font type of the image blocks


webinaide
Go to solution Solved by tuanphan,

Question

Anyone have luck changing the image block title & body text and the button text to a custom font via Font Face? I've tried a few options (see below) and nothing is changing. Thank you!

a.sqs-block-button-element { font-family: "Gotham-Book2" !important; }.sqs-block-image .design-layout-overlap .image-title p { font-family: "Gotham-Book2" !important; }

Edited by webinaide
Initial Revision
Link to post
  • Answers 19
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

.image-title.sqs-dynamic-text p { font-family: 'Golden Trail' !important; }  

Awesome!  Thank you so much for your help. It worked!

Posted Images

19 answers to this question

Recommended Posts

  • 0

@webinaide


/* Image blocks and button in image blocks */
.sqs-block-image * {
   font-family: "Gotham-Book2" !important;
}
/* Newsletter form button */
.newsletter-form-button {
   font-family: "Gotham-Book2" !important;
}


Link to post
  • 0

Is there a way to change just the header font on the image block -- the code you provided works for changing all of the text in the image block...

I don't want the button font to change or the body text in the image block. I'm using the "Ready" template. The code you provided in the previous post works but changes all of the font.

Thanks!

Link to post
  • 0
8 minutes ago, jenplusplus said:

Is there a way to change just the header font on the image block -- the code you provided works for changing all of the text in the image block...

I don't want the button font to change or the body text in the image block. I'm using the "Ready" template. The code you provided in the previous post works but changes all of the font.

Thanks!

Can you share link to your site and take screenshot of "header"?

Link to post
  • 0

This is the code I've written for the H1 & H2. I'd like it to be the header font on the collage image block.

 

//START GOLDEN TRAIL


@font-face {   
font-family: 'Golden Trail';   
src:
  url(https://static1.squarespace.com/static/5dc1032774027b0583e895e0/t/5dc8a8c2492ddd0f8b9f3257/1573431490912/GoldenTrail-KC.ttf),
  
  url(https://static1.squarespace.com/static/5dc1032774027b0583e895e0/t/5dc84cbc09cdf43d6dc464b4/1573407932368/GoldenTrail-KC.otf),
  
  url(https://static1.squarespace.com/static/5dc1032774027b0583e895e0/t/5dc8a729b9580a736408900d/1573431081886/GoldenTrail-KC.woff),
  
  url(https://static1.squarespace.com/static/5dc1032774027b0583e895e0/t/5dc8a734af9d520b7a6a7e82/1573431092599/GoldenTrail-KC.woff2); 
}

h1 {
 font-family: 'Golden Trail';
}
h2 {
 font-family: 'Golden Trail';
}

Link to post
  • 0
10 minutes ago, jenplusplus said:

This is the code I've written for the H1 & H2. I'd like it to be the header font on the collage image block.

.image-title.sqs-dynamic-text p {
    font-family: 'Golden Trail' !important;
}

 

Link to post
  • 0
4 hours ago, Onepaa said:

I am also facing the same issue when i implementing on my webiste https://triviaquestions4u.com/

Can you take screenshot?

Link to post
  • 0

@Tuanphan

Thanks for that code to change the image block font. One more question-- how do I change the navigation font that shows up on the footer?

I've successfully used this code for the hamburger menu/top-of-site navigation:

//NAVIGATION BAR//
.nav-blocks-wrapper div a span {
   font-family: 'Golden Trail' !important;

 

But what do I need to write the code to make the very bottom of the site navigation change to this font as well?

image.thumb.png.d280f67bf9f3a6e9762fcf9fa06441a0.png

Link to post
  • 0
On 11/12/2019 at 11:33 AM, jenplusplus said:

@Tuanphan

Thanks for that code to change the image block font. One more question-- how do I change the navigation font that shows up on the footer?

I've successfully used this code for the hamburger menu/top-of-site navigation:

//NAVIGATION BAR//
.nav-blocks-wrapper div a span {
   font-family: 'Golden Trail' !important;

 

But what do I need to write the code to make the very bottom of the site navigation change to this font as well?

image.thumb.png.d280f67bf9f3a6e9762fcf9fa06441a0.png

I'm wondering the same thing - @Tuanphan any thoughts?

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...