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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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

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
  • 1 year later...
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;
}

 

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
  • 1 month later...

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}

Screen Shot 2023-08-10 at 10.20.13 AM.png

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

 

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.