Jump to content

change portfolio font?

Recommended Posts

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

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

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
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?

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

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

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.