How can I change the Font Family for just a single

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/home-copy-1-1-1-1-1

Hello, I am trying to change the font family of just one text block on my site to 'adobe-caslon-pro' but I can't figure it out?

I am also trying to change its font size to 1.9rem, and the color to #00ff3d

It is the section where the para reads "Introducing our latest SCHOLAR & SAYZÉ ™ additions READ MORE".

Please help!

Page = https://bluebird-porcupine-yzdg.squarespace.com/home-copy-1-1-1-1-1

Pword = bluebird

Many thanks,

Best,

Faiz

If you want to change fonts for one page then you have to use some custom CSS in your required page header code injection. Please use those code in your required pagae header code injection.

<style type="text/css">
  
  #block-yui_3_17_2_1_1613558390525_5996 p {
  	font-family: adobe-caslon-pro !important;
    font-size: 1.9rem !important;
    color: #00ff3d !important;
  }
  
</style>

}

Hey Webefo, thank you SO much - awesome fix!!!

I really appreciate it 💯, been trying to figure it out all am!!!

Sorry I just notice on my mobile device, the paragraph changes does not show on my mobile?

Is there a fix for this please, so at least this para displays as 'adobe-caslon-pro'?

Thank you.

On 2/17/2021 at 10:28 PM, scholarsayze said:

Sorry I just notice on my mobile device, the paragraph changes does not show on my mobile?

Is there a fix for this please, so at least this para displays as 'adobe-caslon-pro'?

Thank you.

The url doesn't exist. Can you check again?

Sorry I set the page as my home page now just trying hard to finish off everything!

Here's the correct page = https://bluebird-porcupine-yzdg.squarespace.com/home

Pword = bluebird

As attached, the font doesn't seem to be showing as Adobe Caslon Pro on my mobile. It shows correctly on the Squarespace mobile preview. But not on actual mobile.

On 2/19/2021 at 3:49 PM, scholarsayze said:

Sorry I set the page as my home page now just trying hard to finish off everything!

Here's the correct page = https://bluebird-porcupine-yzdg.squarespace.com/home

Pword = bluebird

As attached, the font doesn't seem to be showing as Adobe Caslon Pro on my mobile. It shows correctly on the Squarespace mobile preview. But not on actual mobile.

Hi. Did you solve this?

I haven't solved this yet, please help me!

Updated page link - https://bluebird-porcupine-yzdg.squarespace.com/home

Pword - bluebird

Thank you!

Quote

As attached, the font doesn't seem to be showing as Adobe Caslon Pro on my mobile.

Font looks good on ancient iPhone 5/iOS 10.x.

What platform and os are you using?

Hey Creedon, many thanks for checking! I appreciate that.

I have the Huawei Mate 20 Pro Andriod. Just not sure why it's not showing the Adobe Caslon Pro font?!

Thanks Creedon, I appreciate your support here, many thanks! 💯

I don't really know much about web fonts but just looking through this - https://stackoverflow.com/questions/3245141/using-otf-fonts-on-web-browsers - the code seems to have a source url, do I need to download Adobe Caslon Pro, and upload it somewhere to get a url?

Sorry for my lack of understanding here. I'm not really confident do this kind of stuff!

@scholarsayze

I assume you set the font through the SS interface? As in it was a choice SS offered?

If so then I'd say no you don't need to download it as SS has already got that part set up.

Thanks very much I'll take a look into this if not, I guess I could play around with other alternatives.

Thank you!

On 2/23/2021 at 2:18 PM, scholarsayze said:

Thanks very much I'll take a look into this if not, I guess I could play around with other alternatives.

Thank you!

Hi. Have you solved it yet?

Hi Tuanphan, I actually set my main Headers to Libre Baskerville which is pretty much a good match and decided against actually showing this section on mobile.

Many thanks, sorted for now!!

Hey Tuanphan,

I'm having a similar issue to this where I added some custom CSS to change a couple headings on my site using a font that is already downloaded to Squarespace. Unfortunately, The font is not showing up on mobile. Are you able to figure out why? 

site- burnandbloom.co

7 hours ago, sheasdesign said:

Hey Tuanphan,

I'm having a similar issue to this where I added some custom CSS to change a couple headings on my site using a font that is already downloaded to Squarespace. Unfortunately, The font is not showing up on mobile. Are you able to figure out why? 

site- burnandbloom.co

Which elements you applied font? We can check easier

Blog Banner Heading - Table Talk

section[data-section-id="60899f5e0b166a1cdeaea275"]{
    h2{
font-family:'adobe handwriting ernie' !important;
     font-size: 3em;}

Two Ways to Gather Headings - 

section[data-section-id="6089e761b2749f32161b43ee"]{
  h3{
    font-family: Adobe Handwriting Ernie;
  }
}

Blog Page Heading & Contact Heading - Gather Together

section[data-section-id="6083205cabd1ac60173dfc67"],
section[data-section-id="60c92a7edb22c9295ef2eb19"]
{
  h1{
  font-family: Adobe Handwriting Ernie;
    font-size:3.7em;
  }
}

Hi Tuanphan,

Are you able to help with this font customization? Really appreciate your help! 

Blog Banner Heading - Table Talk

section[data-section-id="60899f5e0b166a1cdeaea275"]{
    h2{
font-family:'adobe handwriting ernie' !important;
     font-size: 3em;}

Two Ways to Gather Headings - 

section[data-section-id="6089e761b2749f32161b43ee"]{
  h3{
    font-family: Adobe Handwriting Ernie;
  }
}

Blog Page Heading & Contact Heading - Gather Together

section[data-section-id="6083205cabd1ac60173dfc67"],
section[data-section-id="60c92a7edb22c9295ef2eb19"]
{
  h1{
  font-family: Adobe Handwriting Ernie;
    font-size:3.7em;
  }
}

I don't understand the code above, what are they for?

The code is to customize a few headers from the assigned font family to another font family apart of the Squarespace font list. 

Here is how it looks on my desktop - 

Here is how it looks on my mobile - 

Are you able to help?

First, change your font name to this

div#block-yui_3_17_2_1_1619638941630_9479 h2 {
    font-family: adobe-handwriting-ernie !important;
    font-size: 3em;
}

Next, add this to Custom CSS

@font-face{
	font-family:adobe-handwriting-ernie;
	src:url(https://use.typekit.net/af/a9e09c/00000000000000007735b601/30/l?subset_id=2&fvd=n4&v=3) format("woff2"),url(https://use.typekit.net/af/a9e09c/00000000000000007735b601/30/d?subset_id=2&fvd=n4&v=3) format("woff"),url(https://use.typekit.net/af/a9e09c/00000000000000007735b601/30/a?subset_id=2&fvd=n4&v=3) format("opentype");
font-weight:400;
font-style:normal;
font-display:auto;
}