Change the fonts on my blog image card blocks - CSS

Site URL: https://www.brightzine.co/news/2021/5/19/london-vegan-restaurants-we-cant-wait-to-return-to-or-try-for-the-first-time

Hi I tried some CSS I found on here but it didn't work and I need some help.

I'm trying to change the title and subtitle font on the image cards on my blog posts to Helvetica.

https://www.brightzine.co/news/2021/5/19/london-vegan-restaurants-we-cant-wait-to-return-to-or-try-for-the-first-time

Much appreciated! 

@tuanphan maybe you can help me? 🙂

On 6/5/2021 at 2:02 PM, TamsinRose said:

@tuanphan maybe you can help me? 🙂

Add to Design > Custom CSS

/* Blog posts - Image card */
body[class*="collection-type-blog"] .design-layout-card .image-card * {
    font-family: Helvetica !important;
}

I have adobe typekit setup through custom CSS for all of my h1 to h4 fonts but my blog headlines are showing the standard theme style.

Does anyone know how I can edit the CSS so the blog headlines match the rest of the site?

5 hours ago, epete22 said:

I have adobe typekit setup through custom CSS for all of my h1 to h4 fonts but my blog headlines are showing the standard theme style.

 

Does anyone know how I can edit the CSS so the blog headlines match the rest of the site?

Each template, blog has a different class name. Can you share link to post in screenshot? We can check its code

@tuanphan

https://asparagus-dahlia-3mf3.squarespace.com/education/blog-post-title-two-afelk

pw:dallas

On 7/11/2021 at 9:40 PM, epete22 said:

@tuanphan

https://asparagus-dahlia-3mf3.squarespace.com/education/blog-post-title-two-afelk

pw:dallas

 

Hi. Incorrect password. Can you check it again?

@tuanphan sorry its 

@tuanphan

https://asparagus-dahlia-3mf3.squarespace.com/education/blog-post-title-two-afelk

pw:Dallas

 

14 hours ago, epete22 said:

@tuanphan sorry its 

 

@tuanphan

https://asparagus-dahlia-3mf3.squarespace.com/education/blog-post-title-two-afelk

pw:Dallas

 

 

Find this code in Custom CSS

h1 {
    font-family: jaf-lapture,serif;
    font-weight: 400;
    font-style: normal;
}

change it to

h1 {
    font-family: jaf-lapture,serif !important;
    font-weight: 400;
    font-style: normal;
}

On 7/15/2021 at 1:59 AM, tuanphan said:

Find this code in Custom CSS

h1 {
    font-family: jaf-lapture,serif;
    font-weight: 400;
    font-style: normal;
}

change it to

h1 {
    font-family: jaf-lapture,serif !important;
    font-weight: 400;
    font-style: normal;
}

 

Hi @tuanphan, I see you sharing that it's possible to use CSS to ask Squarespace to inherit site styles for the font family. What do you use for the username / keyword here? For example, you wrote for someone as an example that you could put "font-family: tuanphan !important" - how do I find my site's equivalent? 

This is the page I am working on: https://www.youbelongsd.com/services-page

I'm trying to get the image block title & subtitle to inherit the site styles paragraph font style (Proxima Nova). 

Thank you!

On 1/25/2023 at 3:31 AM, jinlikegold said:

Hi @tuanphan, I see you sharing that it's possible to use CSS to ask Squarespace to inherit site styles for the font family. What do you use for the username / keyword here? For example, you wrote for someone as an example that you could put "font-family: tuanphan !important" - how do I find my site's equivalent? 

This is the page I am working on: https://www.youbelongsd.com/services-page

I'm trying to get the image block title & subtitle to inherit the site styles paragraph font style (Proxima Nova). 

Thank you!

Add to Design > Custom CSS

.image-title *, .image-subtitle * {
    font-family: 'proxima-nova' !important;
}

With some fonts I use often, I already remember their font families, for example: monospace, proxima-nova, futura-pt,..

For the rest of the fonts, I need to go to Site Styles, set that font for any element, then inspect the element to check what its font family is.

22 hours ago, tuanphan said:

Add to Design > Custom CSS

.image-title *, .image-subtitle * {
    font-family: 'proxima-nova' !important;
}

With some fonts I use often, I already remember their font families, for example: monospace, proxima-nova, futura-pt,..

For the rest of the fonts, I need to go to Site Styles, set that font for any element, then inspect the element to check what its font family is.

Thank you so much! Adding the * is what I was missing. I had already been trying to set it to the font family with !important, but for some reason it wasn't responding until I did what you suggested. Much much appreciated.