Jump to content

Changing the font of one section in Squarespace - HELP!

Recommended Posts

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:490102411_ScreenShot2021-11-08at1_52_26PM.thumb.png.cb7a78cfdcefff0f696544c0d391f32c.png

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?

Link to comment

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!

 

 

Link to comment

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.

SquareRefresh, premium plugins & templates that have an elevated feel.

Plugins: Have your site stand out. 
Templates: Our templates are designed with versatility in mind.
Get Freebies: Sometimes things in life are free. Browser our hand selected free plugins.

Link to comment
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!

Link to comment

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).1941333897_ScreenShot2021-11-10at9_54_39AM.thumb.png.6e9c0521e76427241aa4eadfd1d0c486.png
Thank you again!
Learning this as I go is kinda fun! And stressful. But mostly fun.

Link to comment
  • 1 year later...
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:image.png.5732690f88ad3b6a780963ffbd0ecf69.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

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

Edited by dustinandjessica
Link to comment
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).

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.