Using Custom CSS to change to other Squarespace fonts for single page

Site URL: http://www.ungsonlab.com/erin-nick

I am trying to change the font on a single page on my site using Custom CSS and the page's collection ID. I have been trying to do this by changing the font-family property in the site-wide Custom CSS (since I do not want to change the font for any other pages). I'm not using custom fonts; I am happy to use the Squarespace, but I do not know what the exact "labels" are for these various fonts. Some, like "Arial" are straightforward, but others (e.g., "Libre Baskerville" or "Omnes Pro") do not seem to be changing the font appropriately. Any advice would be helpful! Or even, more generally -- and since I am a novice to CSS -- are there helpful tips for knowing how to convert font names to acceptable arguments for the "font-family" property? The current code I am using is below:

#collection-62c85f073082c37e42edc553 {
  
  header#header {
    display:none;
  }
  
  h1 {
    font-family: "Libre Baskerville";
  }
}

To know exact font name, you will need to inspect code, need to know code.

Just write the fonts which you want to know name, we can give the font name code

On 7/9/2022 at 12:15 AM, tuanphan said:

To know exact font name, you will need to inspect code, need to know code.

Just write the fonts which you want to know name, we can give the font name code

Thank you very much for your help 😀! If it's not too much trouble, I'd like the font name code for the following:

• Sorts Mill Goudy

• FF Tisa Pro

• Alegreya SC

• Adobe Garamond Pro

• Alegreya Sans

• Brandon Grotesque

• Cabin

• Proxima Nova

• Omnes Pro

• Freight sans pro

Sorts Mill Goudy

• FF Tisa Pro font-family: ff-tisa-sans-web-pro;

• Alegreya SC I dont see this font

• Adobe Garamond Pro font-family: adobe-garamond-pro;

• Alegreya Sans  font-family: Alegreya Sans;

• Brandon Grotesque font-family: brandon-grotesque;

• Cabin font-family: Cabin;

• Proxima Nova font-family: proxima-nova;

• Omnes Pro font-family: omnes-pro;

• Freight sans pro font-family: freight-sans-pro;

Unfortunately, I have altered my code and it still does not work in changing the font. Below is my attempt to change the font-family property in the site-wide Custom CSS using one of the provided font codes you gave: "adobe-garamond-pro" to change the H1 heading. I've also tried this with the other codes you provided (e.g., "ff-tisa-sans-web-pro"; "brandon-grotesque", "Cabin"), to no avail. Thanks in advance.

#collection-62c85f073082c37e42edc553 {
    header#header {
    display:none;
  }
  
  h1 {
    font-family: "adobe-garamond-pro";
  }
}

On 7/15/2022 at 11:47 PM, nicson123 said:

Unfortunately, I have altered my code and it still does not work in changing the font. Below is my attempt to change the font-family property in the site-wide Custom CSS using one of the provided font codes you gave: "adobe-garamond-pro" to change the H1 heading. I've also tried this with the other codes you provided (e.g., "ff-tisa-sans-web-pro"; "brandon-grotesque", "Cabin"), to no avail. Thanks in advance.

 

#collection-62c85f073082c37e42edc553 {
    header#header {
    display:none;
  }
  
  h1 {
    font-family: "adobe-garamond-pro";
  }
}

 

In order to use a specific font  in CSS, it has to be selected as a font for something else so that Squarespace loads the font onto the website first.
SS has thousands of fonts, by default SS only loads some popular fonts, it can't load all otherwise the website will be extremely slow. In order to use font   in CSS, it has to be selected as a font for something else so that Squarespace loads the font onto the website first.

3 hours ago, tuanphan said:

In order to use a specific font  in CSS, it has to be selected as a font for something else so that Squarespace loads the font onto the website first.
SS has thousands of fonts, by default SS only loads some popular fonts, it can't load all otherwise the website will be extremely slow. In order to use font   in CSS, it has to be selected as a font for something else so that Squarespace loads the font onto the website first.

 

I see, thank you. My goal is to have fonts on this page (http://www.ungsonlab.com/erin-nick) that are not used anywhere else on the site. What are my options for doing this? How else could I make sure these fonts are "selected as a font for something else so that Squarespace loads the font" without using Design / Site Styles to change the H1 or H2 or body text for the entire rest of the site? Are there other ways to change fonts than Design / Site Styles? Am I missing a rich text editor somewhere? Thanks for your help.

On 7/18/2022 at 7:11 PM, nicson123 said:

I see, thank you. My goal is to have fonts on this page (http://www.ungsonlab.com/erin-nick) that are not used anywhere else on the site. What are my options for doing this? How else could I make sure these fonts are "selected as a font for something else so that Squarespace loads the font" without using Design / Site Styles to change the H1 or H2 or body text for the entire rest of the site? Are there other ways to change fonts than Design / Site Styles? Am I missing a rich text editor somewhere? Thanks for your help.

You can set 

adobe-garamond-pro

for any elements on Site Styles, to force Squarespace load that font, then you can use above CSS to apply font for h1 on onepage

6 hours ago, tuanphan said:

You can set 

adobe-garamond-pro

for any elements on Site Styles, to force Squarespace load that font, then you can use above CSS to apply font for h1 on onepage

Thank you! This worked. I believe this will be my final question. Your suggestion helped me change the font for the one page for Headings 1 (h1), 2 (h3), and 3 (h3). See code below. However, I was unable to change the "body" text with the same method, and I am not sure why. The code below properly changes Headings 1, 2, and 3, but not the body text. Thanks in advance.

#collection-62c85f073082c37e42edc553 {
    header#header {
    display:none;
  }
  
  h1 {
    font-family: "Sorts Mill Goudy";
  }
    h2 {
    font-family: "Sorts Mill Goudy";
  }
    h3 {
    font-family: "Sorts Mill Goudy";
  }
    body {
    font-family: "Sorts Mill Goudy";
  }
}

11 hours ago, nicson123 said:

Thank you! This worked. I believe this will be my final question. Your suggestion helped me change the font for the one page for Headings 1 (h1), 2 (h3), and 3 (h3). See code below. However, I was unable to change the "body" text with the same method, and I am not sure why. The code below properly changes Headings 1, 2, and 3, but not the body text. Thanks in advance.

#collection-62c85f073082c37e42edc553 {
    header#header {
    display:none;
  }
  
  h1 {
    font-family: "Sorts Mill Goudy";
  }
    h2 {
    font-family: "Sorts Mill Goudy";
  }
    h3 {
    font-family: "Sorts Mill Goudy";
  }
    body {
    font-family: "Sorts Mill Goudy";
  }
}

 

Try replace "body" with "p"

Hi! 

I wish to have a change the font for H1 only across my site, and the code I tried doesn't work. I put it in Design>Custom Css

h1 { 
    font-family: ‘alisha'; !important;
}

What have I done wrong? Why doest it work.

My website is kristensenart.com

Thanks in advance.

19 hours ago, CreationsbyS said:

Hi! 

I wish to have a change the font for H1 only across my site, and the code I tried doesn't work. I put it in Design>Custom Css

h1 { 
    font-family: ‘alisha'; !important;
}

What have I done wrong? Why doest it work.

My website is kristensenart.com

Thanks in advance.

Try this code

h1, h1 * { 
    font-family: alisha !important;
}

On 5/14/2023 at 8:01 AM, tuanphan said:

Try this code

h1, h1 * { 
    font-family: alisha !important;
}

 

Yes it worked, thanks!

On 7/19/2022 at 9:56 AM, tuanphan said:

You can set 

adobe-garamond-pro

for any elements on Site Styles, to force Squarespace load that font, then you can use above CSS to apply font for h1 on onepage

Thank you SO much! This is an amazing tip!! I changed the font for my "content link block" which I have literally never used to the font I was trying to apply, and it worked perfectly.