change portfolio font?

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! 

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

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 

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

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

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?

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?

Can your share the link to your site?

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!

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!

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

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