Changing the font of one section in Squarespace - HELP!

Hi y'all, I am hoping someone can help me with a seemingly simple edit that I cannot figure out. I am trying to change the font of a single section on a SquareSpace site using a Code Block. Here is a screenshot:

I downloaded a div identifier, so that doesn't seem to be the issue. Still, the 'hey' text is showing up as Times New Roman. What am I doing wrong? I am super new to CSS/html coding (i.e. I am learning as I go) and I haven't been able to figure out how to fix this. Can someone please help?

Hello! Welcome to the community.

First off, you're well on your way to getting you're website looking like how you imagine it and it's awesome to see that you're taking a step to learn about customizing your website.

Couple of things to keep in mind:

1) When you're editing a block or a page, or even a section of your website. You'll do most of the editing in the Home > Design > Custom CSS tab.

2) You won't need to use a code block for editing pieces of your website with CSS that could otherwise be written in the Custom CSS tab.

3) When you're editing in the Custom CSS tab -- You won't need to use <style> tags in the menu at all 🙂 You just need to follow the following format with any variation of properties:

YOUR_BLOCK/SECTION_ID_HERE {
font-family: YOUR_FONT_NAME;
padding: YOUR_PADDING;
margin: YOUR_MARGINS;
background-color: YOUR_COLORS;
display: PICK_ONE_ONLY_ONE -> "Block // Flex // Inline-Block // Grid";
width: %,PX,EM,REM,VW
height:%,PX,EM,REM,VH
position: PICK_ONE_ONLY_ONE -> "Relative // Absolute // Fixed // Static";
font-size: %,PX,EM,REM
transform: Translate (x,y), Rotate(VALUE-deg), Scale(2), so much more...;
}

4) Try removing your code from the code-block and adding it to your Custom CSS menu and see if that makes a change. If not, feel free to message me or reply here with the URL and I'll do my best to clear up any confusion.

Don't give up!

Hey @bsturc you want to use a markdown block and not a code block. Markdown blocks also have a cheatsheet to a SQSP help page which shows you how to change this accordingly. If you are using a font that's not in SQSP library you will need to add it in the CSS panel.

Thank you both!!!! I will test out both of these methods just to see what works / to experiment.

20 hours ago, SquareRefresh said:

Hey @bsturc you want to use a markdown block and not a code block. Markdown blocks also have a cheatsheet to a SQSP help page which shows you how to change this accordingly. If you are using a font that's not in SQSP library you will need to add it in the CSS panel.

Okay, so neither of those worked, likely because I'm installing my font incorrectly. I'm frustrated and don't want to troubleshoot this right now, so changing the font seems like the quickest fix. New question - How can I find out what fonts are already in the font library? I'm using the 7.1 version. Thank you!

Okay, disregard my frustration. Update 2: I did the thing. I figured out how to make the code block work!!! 🙂

@bsturc you still would want to use a markdown down block for plain text and not a code block 

New questions!

12 hours ago, SquareRefresh said:

@bsturc you still would want to use a markdown down block for plain text and not a code block 

1. What do you mean by this? 'Markdown' is an option within Code Blocks. Are you referring to something else?

2. I figured out how to install custom fonts and get them show, and how format specific sections via CSS with the SquareSpace ID finder, however, the custom fonts don't to show up unless there is a code block above it. Why is this / how do I fix it? I could format all of the text in the code block itself, but there's additional formatting options I want to apply, and it seems easiest to do that via the font style options (like indenting text, for example).
Thank you again!
Learning this as I go is kinda fun! And stressful. But mostly fun.

I finally figured out what the difference is between a code block and markdown block! Prior to today, I didn't know a markdown block even existed, hence my severe confusion. Thank you again for mentioning it and compelling me to research it further!!!

Hey! I am struggling with the same issue. I have tried a bunch of different iterations of the code but have not been able to make it work. Do you know how I need to change this:

On 3/21/2023 at 8:03 AM, majidkoudmani said:

Hey! I am struggling with the same issue. I have tried a bunch of different iterations of the code but have not been able to make it work. Do you know how I need to change this:

Can you share link to page where you want to apply effect?

Hi everyone,

Sorry to resurrect an old thread, but I am trying to use the code provided in this post and having trouble.

The goal is to change the font of specific sections of one page of my website.  The font I would like to change to is called "Adobe Handwriting Ernie" which is supported by squarespace.

Here is the page in question: https://www.bullmarketcreative.com/wedding-films
I placed this code in the CSS area of 'Website Tools' but with no success:

#block-ab950f4d82666231626e {
font-family: Adobe Handwriting Ernie !important;
}

If I can get this to work for one block I will just copy/paste to apply the same effect to certain other blocks on the page.

Thank you for reading!!

On 3/26/2024 at 9:02 AM, dustinandjessica said:

Hi everyone,

Sorry to resurrect an old thread, but I am trying to use the code provided in this post and having trouble.

The goal is to change the font of specific sections of one page of my website.  The font I would like to change to is called "Adobe Handwriting Ernie" which is supported by squarespace.

Here is the page in question: https://www.bullmarketcreative.com/wedding-films
I placed this code in the CSS area of 'Website Tools' but with no success:

#block-ab950f4d82666231626e {
font-family: Adobe Handwriting Ernie !important;
}

If I can get this to work for one block I will just copy/paste to apply the same effect to certain other blocks on the page.

 

Thank you for reading!!

First, font family name is

adobe-handwriting-ernie

Next, SS has thousands of fonts, if it loaded them all, the website would be very slow, so SS only loads a few popular fonts. To be able to use font-family code for other fonts, you need to set this font for any element in Site Styles (the purpose is to tell SS to load this font file).

Thank you so much!!!  You are the G.O.A.T. tuanphan !

@tuanphan so sorry to bother but i'm trying to do the same thing and failing miserably! i loaded the font i want to use by assigning it to miscellaneous (tags, product pricing, etc), but it's still showing an error message. what am i doing wrong?

I also tried removing the dash and that removes the error message but doesn't actually change the font

I also loaded the font into another style, tertiary button, and it's still not changing it lol