Jump to content

Change custom font for list item titles

Go to solution Solved by Beyondspace,

Recommended Posts

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!

Link to comment
  • Solution
57 minutes ago, sarur said:

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!

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing result

Hope it can help you

image.thumb.png.208c3aad26635b4dbd0c5b108969ea59.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 months later...
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

Link to comment
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

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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)

Edited by ElizLdn
Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 4 weeks later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.