Change custom font for list item titles

Site URL: https://herring-grouse-6mkf.squarespace.com/kontakt

Hi, 

I'm trying to change the font of the listed items titles (i.e: the names, "Jeanette Perman" etc) to our custom font, but without success. I've managed to import the custom font and change various other parts of the website, but now I'm stuck... The URL is https://herring-grouse-6mkf.squarespace.com/kontakt (password: magritte123) and the part I'm referring to is the section "Medarbetare" (a "simple list"). 

I've tried different version of this code, but I can't seem to get it right: .list-item-title {font-family: 'MP-Display'!important;} 

When I'm writing .list-item {font-family: 'MP-Display'!important;} the font for the body text changes (function and e-mail adress), which isn't what I want – I only want to change the font for the names... 🙂 

Anybody who can help? Would be greatly appreciated!

My testing result

Hope it can help you

Thank you so so much @bangank36! It works!!! 😄

Have a great day ans thanks again!

On 11/3/2021 at 2:08 PM, bangank36 said:

You can try adding to Home > Design > Custom Css

.user-items-list-item-container .list-item-content__title {
  font-family: MP-Display;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Thank you - this worked for me as well!

One issue though - is it possible increase the size of the list item titles , specifically on mobile

Thanks

1 hour ago, ElizLdn said:

Thank you - this worked for me as well!

One issue though - is it possible increase the size of the list item titles , specifically on mobile

Thanks

For normal setting size for titles in List, you can try editing of squarespace:

On the mobile, kindly add the following code to Home > Design > Custom Css 

@media only screen and (max-width: 767px) {
  .user-items-list-item-container .list-item-content__title {
    font-size: 0.5rem;
  }
}

Change the value until it meets your requirement

Hope that it makes sense

6 hours ago, bangank36 said:

For normal setting size for titles in List, you can try editing of squarespace:

 

On the mobile, kindly add the following code to Home > Design > Custom Css 

@media only screen and (max-width: 767px) {
  .user-items-list-item-container .list-item-content__title {
    font-size: 0.5rem;
  }
}

Change the value until it meets your requirement

Hope that it makes sense

Yes it does make sense, but unfortunately the code doesn’t work no matter what I change the value to (on mobile)

@ElizLdn Can you share link to page where you added list? We can take a look

4 minutes ago, tuanphan said:

@ElizLdn Can you share link to page where you added list? We can take a look

I’ve messaged you privately. Thanks 

5 hours ago, ElizLdn said:

I’ve messaged you privately. Thanks 

You mean "Click on each..." text?

On 1/7/2022 at 4:58 AM, ElizLdn said:

 

Yes it does make sense, but unfortunately the code doesn’t work no matter what I change the value to (on mobile)

You can add important to make it work in higher priority

@media only screen and (max-width: 767px) {
  .user-items-list-item-container .list-item-content__title {
    font-size: 0.5rem !important;
  }
}

Let me know how it works

3 hours ago, bangank36 said:

You can add important to make it work in higher priority

@media only screen and (max-width: 767px) {
  .user-items-list-item-container .list-item-content__title {
    font-size: 0.5rem !important;
  }
}

Let me know how it works

It’s working now! Thank you so much

Hi,

What would be the code to have the list-section-title to use my custom font please?

It's set up in Squarespace to use my custom font (H3) but still showing the overall site default font...

Website https://www.soldesignstudio.com/

Thanks for your help,

Sarah

On 1/30/2022 at 7:51 PM, SarahSWD said:

Hi,

What would be the code to have the list-section-title to use my custom font please?

It's set up in Squarespace to use my custom font (H3) but still showing the overall site default font...

Website https://www.soldesignstudio.com/

Thanks for your help,

Sarah

It looks like you fixed with this code?

.list-section-title {
    font-family: 'CHLOE' !important;
    text-transform: uppercase !important;
}