Change Summary Block Title Font to Heading Font

Does anyone know how to change the set summary block font to adopt the characteristics of heading font eg heading 3/h3?

59 minutes ago, TheHouseAgency said:

Does anyone know how to change the set summary block font to adopt the characteristics of heading font eg heading 3/h3?

The default style from Squarespace for Title in summary block will be inherited from the --body-font-font-family variable

You are using anther custom CSS code, it may overwrite the default style. Share your URL here so we can  check more detail

If your site is not published yet, provide it with a protected password, share it here so we can access your site
 

Thanks for the help.

Domain is still propagating but you'll find the page at https://www.destinationartisans.com.au/gastronomy-1

33 minutes ago, Lesum said:

@TheHouseAgency Hi! To set the Summary block title font to the H3 style, add this code in Website > Pages > Website Tools > Custom CSS.

.sqs-block-summary-v2 .summary-title {
    font-family: var(--heading-font-font-family) !important;
    font-style: var(--heading-font-font-style) !important;
    font-weight: var(--heading-font-font-weight) !important;
    letter-spacing: var(--heading-font-letter-spacing) !important;
    text-transform: var(--heading-font-text-transform) !important;
}

.sqs-block-summary-v2 .summary-title {
    line-height: calc(~'var(--heading-font-line-height)*(1 +(1 - var(--heading-3-size-value)) / 25)') !important;
}

@media screen and (min-width: 1379.06px) {
    .sqs-block-summary-v2 .summary-title {
        font-size: calc(~'var(--heading-3-size-value)* 1rem') !important;
    }
}

@media screen and (min-width: 768px), screen and (max-width: calc(1378.06px)) and (orientation: landscape) {
    .sqs-block-summary-v2 .summary-title {
        font-size: calc(~'(var(--heading-3-size-value) - 1)* 1.2vw + 1rem') !important;
    }
}

@media screen and (max-width: 767px) and (orientation: portrait) {
    .sqs-block-summary-v2 .summary-title {
        font-size: calc(~'(var(--heading-3-size-value) - 1)* calc(.012* min(100vh, 900px)) + 1rem') !important;
    }
}

 

Hi, Thanks for the help. 

That code works great on mobile but the spacing is off for desktop

https://www.destinationartisans.com.au/gastronomy-1

@TheHouseAgency Try moving this block of code at the end of everything. Or you can simply remove the previous code and copy/paste the entire updated code from my previous comment.

@media screen and (min-width: 1379.06px) {
    .sqs-block-summary-v2 .summary-title {
        font-size: calc(~'var(--heading-3-size-value)* 1rem') !important;
    }
}