Jump to content

change portfolio font?

Recommended Posts

I'm struggling to change the font of the project titles on my portfolio (hover: background) to a custom font that I've already added to my site. I'm new to CSS so any help/tips would be great! 

Link to comment
  • Replies 11
  • Views 5k
  • Created
  • Last Reply

Top Posters In This Topic

15 minutes ago, angelrat3000 said:

I'm struggling to change the font of the project titles on my portfolio (hover: background) to a custom font that I've already added to my site. I'm new to CSS so any help/tips would be great! 

Have you tried setting style for it?

Or add to Home > Design > Custom Css

.portfolio-title {
  font-family: 'arial' !important;
}

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 picker form field)
💫 Gallery block 7.1 workaround
🥳 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
1 hour ago, bangank36 said:

Have you tried setting style for it?

 

Or add to Home > Design > Custom Css

.portfolio-title {
  font-family: 'arial' !important;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

I've applied styles to the rest of my site, but for some reason I can't seem to use my custom font for the portfolio titles. I tried the code you suggested and it didn't change the portfolio titles :(( My custom font does work when I've used it as the <h1> font throughout the site. 

this is the current css for custom font: 

//Adding Lydia//
@font-face {    
font-family: 'Lydia';       
src: url('https://static1.squarespace.com/static/61849da82e1a6d65efb203c0/t/6184cbbae8ad490fbb35e559/1636092859937/LydiaCondensed-Bold.ttf');  }

//Assign Lydia Font//
h1 {font-family: 'Lydia';}

but nothing I do seems to change the project titles on my portfolio page 

 

 

Link to comment
1 hour ago, angelrat3000 said:

I've applied styles to the rest of my site, but for some reason I can't seem to use my custom font for the portfolio titles. I tried the code you suggested and it didn't change the portfolio titles :(( My custom font does work when I've used it as the <h1> font throughout the site. 

this is the current css for custom font: 

//Adding Lydia//
@font-face {    
font-family: 'Lydia';       
src: url('https://static1.squarespace.com/static/61849da82e1a6d65efb203c0/t/6184cbbae8ad490fbb35e559/1636092859937/LydiaCondensed-Bold.ttf');  }

//Assign Lydia Font//
h1 {font-family: 'Lydia';}

but nothing I do seems to change the project titles on my portfolio page 

 

 

Kindly share your site with the protected password to check it together

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
On 11/7/2021 at 1:21 AM, bangank36 said:

Kindly share your site with the protected password to check it together

I found the solution to my issue -

I used this code to change the font of my portfolio titles and also change the font size

//portfolio title font//
h1.portfolio-hover-item-title {font-family: 'Lydia' !important;} 
h1.portfolio-hover-item-title {font-size: calc(6.6vw + 5rem) !important;}

Link to comment
  • 2 months later...
On 11/12/2021 at 10:22 AM, angelrat3000 said:

I found the solution to my issue -

I used this code to change the font of my portfolio titles and also change the font size

//portfolio title font//
h1.portfolio-hover-item-title {font-family: 'Lydia' !important;} 
h1.portfolio-hover-item-title {font-size: calc(6.6vw + 5rem) !important;}

Ah this is amazing! Thank you!

I'm wondering if you know how to add a border around the text like in this picture? And how to change colour on hover?

Screen Shot 2022-01-24 at 6.20.06 PM.png

Link to comment
5 hours ago, tonicastudio said:

Ah this is amazing! Thank you!

I'm wondering if you know how to add a border around the text like in this picture? And how to change colour on hover?

Screen Shot 2022-01-24 at 6.20.06 PM.png

Can your share the link to your site?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
13 hours ago, bangank36 said:

Can your share the link to your site?

www.tonicabrandstudio.com 

password: australia

you can go to menu > example page. 

I've actually figured out how to add the border/etc but now I have a section padding issue. I've tried so many codes to try and reduce the padding on the top and bottom. Do you have any ideas how to do this?

Thank you!

Screen Shot 2022-01-25 at 1.26.19 PM.png

Link to comment
5 hours ago, tonicastudio said:

www.tonicabrandstudio.com 

password: australia

you can go to menu > example page. 

I've actually figured out how to add the border/etc but now I have a section padding issue. I've tried so many codes to try and reduce the padding on the top and bottom. Do you have any ideas how to do this?

Thank you!

Screen Shot 2022-01-25 at 1.26.19 PM.png

Try adding to Design > Custom CSS

/* Example page portfolio height */
@media screen and (min-width:768px) {
[data-section-id="61ed52923ad0a2796cf80056"] {
    min-height: 30vh !important;
    height: 50vh;
}
.portfolio-hover-display {
    min-height: unset !important;
    height: 100% !important;
}
[data-section-id="61ed52923ad0a2796cf80056"] .content-wrapper {
    height: 100% !important;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
15 hours ago, tuanphan said:

Try adding to Design > Custom CSS

/* Example page portfolio height */
@media screen and (min-width:768px) {
[data-section-id="61ed52923ad0a2796cf80056"] {
    min-height: 30vh !important;
    height: 50vh;
}
.portfolio-hover-display {
    min-height: unset !important;
    height: 100% !important;
}
[data-section-id="61ed52923ad0a2796cf80056"] .content-wrapper {
    height: 100% !important;
}
}

 

@tuanphan Amazing!! You're a life saver thank you! 

That fixed the padding, but there is one issue... The Images are cut in half now on desktop, but showing up fine on mobile. Any idea why that is? 

This is the updated code that I've slightly changed. I even messed around with the heights to see if that was the problem but the images are still cutting on in desktop view. 
 

/* Example page portfolio height */
@media screen and (min-width:768px) {
[data-section-id="61ed52923ad0a2796cf80056"] {
    min-height: 30vh !important;
    height: 50vh;
}
.portfolio-hover-display {
    min-height: unset !important;
    height: 100% !important;
}
[data-section-id="61ed52923ad0a2796cf80056"] .content-wrapper {
    height: 50% !important;
}
}

 

Edited by tonicastudio
Link to comment
  • 1 year later...
On 10/20/2023 at 6:58 PM, Odrey said:

Does anyone know how I can change the font of these text-buttons on the bottom of my projects using CSS? Or does anyone know how this text is called?

image.thumb.png.603c55155005d56b0b2e270499634c4b.png

It is Pagination. It uses Heading 2, so you can adjust in Site Styles

If you can't find it, let me know, I can give a quick guide. 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.