7.1 adjusting custom font weights

Site URL: https://thefavoriteco.com/

Hi all,

Just uploaded a new font into my site that's very lightweight. i love it but it's not that readable on mobile and so i want to dial up the font weights for paragraph fonts and any fonts used inside a button.  Any suggestion on how to do this?

Thanks!

Add the following CSS.

@media only screen and ( pointer: coarse ) and ( max-width: 1024px ), screen and ( max-width: 799px ) {

  .header-menu-cta a,
  .site-wrapper,
  .sqs-block-button-element
  
    {
    
      font-weight: 600;
      
      }
  }

Let us know how it goes.

Perfect!! Thanks so much, @creedon! Happy holidays.

Actually @creedon, do you happen to know how to do the same thing for CTA button text? on desktop?

Thank you!!!

I updated the CSS in my previous post.

On 12/18/2020 at 3:58 PM, creedon said:

I updated the CSS in my previous post.

Thank you again!!! ❤️

@TFC The pagination title on mobile is too big/overlap. Do you want to resize it, or remove?

https://thefavoriteco.com/our-work/guerriers

On 12/21/2020 at 9:02 PM, tuanphan said:

@TFC The pagination title on mobile is too big/overlap. Do you want to resize it, or remove?

https://thefavoriteco.com/our-work/guerriers

My gosh - you are amazing - great catch!! Thank you and yes!

Just now, TFC said:

My gosh - you are amazing - great catch!! Thank you and yes! It's also the wrong font!

On 12/27/2020 at 7:09 AM, TFC said:

 

Hi. Sorry for the delay. I was off some days for the new year

Add to Home > Design > Custom CSS

/* Pagination title */
@media screen and (max-width:767px) {
h2.item-pagination-title {
    display: none;
}
.item-pagination-prev-next {
    display: block !important;
}
}

19 hours ago, tuanphan said:

/* Pagination title */ @media screen and (max-width:767px) { h2.item-pagination-title { display: none; } .item-pagination-prev-next { display: block !important; } }

thanks, as always! 

Sorry to rehash this but I'm using a Squarespace font, and my top nav options don't allow me to adjust my font weights. Is there some CSS I can use to increase weight or make the top nav have bolder font for visibility?

On 12/31/2021 at 6:19 AM, bybridges said:

Sorry to rehash this but I'm using a Squarespace font, and my top nav options don't allow me to adjust my font weights. Is there some CSS I can use to increase weight or make the top nav have bolder font for visibility?

Can you share link to your site? We can help easier

Hi thanks for the quick response! Actually ended up grabbing a plugin - SquareKicker so I could get much easier designing done without having to tweak the code myself too much!

On 1/3/2021 at 9:26 AM, tuanphan said:

Hi. Sorry for the delay. I was off some days for the new year

Add to Home > Design > Custom CSS

/* Pagination title */
@media screen and (max-width:767px) {
h2.item-pagination-title {
    display: none;
}
.item-pagination-prev-next {
    display: block !important;
}
}

 

Is there a way to do this only for blog post paragraphs?

I'm modelling my site on another Squarespace site, the font is exactly the same on the homepage.
Proxima nova, light, 300, same size etc, but that exact style on their blog posts looks more like 400, not 300?

https://www.luxurylloyd.com/blog/5-luxury-website-design-firms-to-consider-in-2023

On 3/17/2023 at 5:12 PM, johnpaulstuthridge said:

Is there a way to do this only for blog post paragraphs?

I'm modelling my site on another Squarespace site, the font is exactly the same on the homepage.
Proxima nova, light, 300, same size etc, but that exact style on their blog posts looks more like 400, not 300?

https://www.luxurylloyd.com/blog/5-luxury-website-design-firms-to-consider-in-2023

Try this CSS

h4.BlogItem-pagination-link-title {
    font-weight: 300 !important;
}

34 minutes ago, tuanphan said:

Try this CSS

h4.BlogItem-pagination-link-title {
    font-weight: 300 !important;
}

 

I didn't see any change, no errors in the code, but looked the same.

Designs > Custom CSS... right?

On 3/19/2023 at 4:28 PM, johnpaulstuthridge said:

I didn't see any change, no errors in the code, but looked the same.

Designs > Custom CSS... right?

It looks like this font doesn't support weight 300

I just tested, 400 - 300 look same, or template doesn't support 300

11 hours ago, tuanphan said:

It looks like this font doesn't support weight 300

I just tested, 400 - 300 look same, or template doesn't support 300

Strange, because the details of the font on my website and the referenced one are exactly the same, yet theirs definitely looks of higher weight on the blog plage.