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;
}

Hello @tuanphan!

I'm also needing help with my blog list title and item title fonts.

I want to change them to Saint Colombe because currently they're set to Garamond Premier Pro Display 🙂

Thank you so much!

1 hour ago, ssjewelry said:

Hello @tuanphan!

I'm also needing help with my blog list title and item title fonts.

I want to change them to Saint Colombe because currently they're set to Garamond Premier Pro Display 🙂

Thank you so much!

Use this CSS code

h1.BlogItem-title {
    font-family: 'garamond-premier-pro-display' !important;
}
a.BlogList-item-title {
    font-family: 'garamond-premier-pro-display' !important;
}

Hi @tuanphan

I perviously added the following code to my site and it worked until recently. 

++++++++++++++++++

.user-items-list-item-container .list-item-content__title {
  font-family: Lora;
  font-style: italic !important;
}

++++++++++++++++++

Lora is a preloaded SS font that I want to appear as the list item title. Lora is my heading font in the SS editor. It may be worth noting that I have uploaded a custom font (New York) for my H1, H2 and H3. This is the font that is currently loading (see screenshot).  I would like to switch it to Lora. 

Website: https://heidihulbigtherapy.com/

Thank you!

+++++++++++++++++++

This may or may not be helpful. I used the following code to upload NY and make H4 (which is Lora) italic.

//font//
@font-face { 
font-family: 'New York';
src: url(https://static1.squarespace.com/static/5fee838678965c3d27c03d17/t/6212b7b7d437b3711dbb9051/1645393847629/NewYork.otf)}

h1,h2,h3{
font-family: 'New York', OpenSans !important;}

h4{font-style:italic !important}

Update to this. I had to remove the italics (font-style) for it work. It keep breaking when I added it. 

Any thoughts? 

On 8/12/2023 at 1:04 AM, AshM13 said:

Update to this. I had to remove the italics (font-style) for it work. It keep breaking when I added it. 

Any thoughts? 

Use this CSS code

.user-items-list-item-container[data-section-id="6215736de735757330344fae"] h2 {
    font-family: 'Lora' !important;
    font-style: italic !important;
}

Instead of adding a different font to each list item Title, I want to link the title to each person's email address. How can I do that??