Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How can I change the Font Family for just a single


scholarsayze

Question

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

Link to comment

23 answers to this question

Recommended Posts

  • 1

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>

}

Link to comment
  • 1

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

 

Link to comment
  • 0
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?

Link to comment
  • 0
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.

Screenshot_20210219_084639_com.android.chrome.jpg

Hi. Did you solve this?

image.thumb.png.e5a4925dd135adb90489361fab30aca5.png

Link to comment
  • 0

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!

Link to comment
  • 0
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?

Link to comment
  • 0

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

Edited by sheasdesign
Link to comment
  • 0
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

Link to comment
  • 0

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

Edited by sheasdesign
updating sectioning
Link to comment
  • 0

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

Link to comment
  • 0

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 - 1184442006_ScreenShot2021-06-17at4_36_05PM.thumb.png.56308c4cf7e9c8549932e864e2d8c190.png

 

Here is how it looks on my mobile - 

IMG_79E01FE82325-1.thumb.jpeg.382439cd92fd7156a3459bbc6155cdca.jpeg

Are you able to help?

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