How To Use Another Heading Font in Squarespace

S1862_HowToUseAnotherHeaderFontInSquarespace.jpg

Today, I'm going to walk you through how to use a new heading font in Squarespace. Whether you're new to SS, or you've been around a while, you've probably noticed there's only 3 Heading font options in your Text Block. I don't know about you, but sometimes I just need 1 more! And not just one more static option, but one that's changeable as needed.

Nowhere that I've ever seen, does the Style Editor offer you 1 more font style option for the headings, and even if it did, it would be a static choice that can't change per use, depending on where you want to use it. So how do you go about getting another one? You use the Markdown Block.

What is that, by the way? It's just another way of writing in more customized text. It's more customizeable than the Text Block and it does use a little code, but don't let that scare you away!

I'm going to paste it in here for you, and tell you which parts to edit. And if you're afraid you'll mess up your entire site by "coding it wrong," then don't worry! Anything you put in Markdown will not effect the rest of your site, it only effects what you put inside that block. So if you do it, and you don't like it, just delete that block, or erase the content inside that block's edit window, and start over. No harm, no foul!

Keep in mind that Markdown does seem to like using font families you've already chosen in your Style Editor, so for mine I use the same set of typefaces, but in differing variations to change things up a bit, while still maintaining consistency. That's what I'd recommend for you as well.

 

TIP: Go ahead and open up a new document in Word (or Pages) so you can paste in the code I'm giving you. That way you can refer back to it easily later on, AND you can paste in your own Markdown language there to grab later. That will keep you from having to recreate it every time!
 

 

Let's get started!

(click any image to enlarge it)

1

Add a Markdown Block

Add a Markdown Block to your layout and once you've done that, click Edit on that block.

Want to see what that looks like? My numbers & titles for each section in the blog are all using a Markdown Block! Here's what it looks like when my block is selected:

 
 
 

2

Copy & Paste in this code

When that window opens up, start by pasting in the following code into that text area:

<span style="font-family:Playfair Display; font-style:italic; font-size:1em; color:#979289">Example Text</span>

When you're done with that step, your Markdown Block editing window should look like this:

 
 
 

When you edit in Markdown, your changes display as you go, so you can see them in real time.

When you click Apply, and exit the editing window after pasting in my code, your Markdown Block will display like this example below (for the code you just pasted in):

Example Text

Okay, that's the general idea! Now, let's talk about how to customize it!

 

3

Customize your Markdown text

This is the fun part: customizing your text inside Markdown! Below I've written some of the display elements you can customize in the code I just gave you. 

NOTE: Squarespace has a link at the top of your Markdown editing window, to their Syntax Cheatsheet. If you get confused or need more help, that page is a great resource for the most basics elements. You can find the cheatsheet by clicking here, or the underlined link in the top of your Markdown window, which looks like this:

Please note:

Inside the code itself, that I just gave you, only edit the areas after the :colon and before the semi-colon; in bold in the code below and in the example directly below:

 ––>   code-example:EDIT THIS PART ONLY;   <–– 

font-family:Playfair Display;
font-style:italic;
font-size:1em;
color:#E2D2A8

 

FONT:
To change the font (& your template may want you to use a font you're already using for Header 1, 2 or 3 in your Style Editor), delete "Playfair Display" from the "font-family" code line, but leave the punctuation as is. You have to know the exact name of the font family you want for this part, so have it ready! Type in the name of the font you'd like to use instead, for example:

font-family:Raleway;

instead of:

font-family:Playfair Display;

 

FONT WEIGHT/STYLE:
To change the style or weight of that font, delete "italic" from the "font-style" code line, –again, leave the punctuation as is. Replace "italic" with whatever weight or style you're looking for instead. Some fonts use numbers for their weights, like Brandon Grotesque, which displays as Regular, Bold, or Black, etc., or 300, 500, 700, etc., depending on where you're using it. For example:

font-style:bold;

instead of:

font-style:italic;

 

SIZE:
To change the size of the text, delete "1em" from the "font-size" code line, –leaving punctuation as is. Replace "1em" with whatever size you'd like to use instead.

What is an em and how do I know what size I want?

Here are some general tips on choosing a font size in Markdown:

    • on the web, font sizes can be in pixels (px) or ems (em)
    • the bigger the number, the bigger your text will display
    • Ems are more consistently sized across devices, so I stick with em wherever I can
    • to size in ems, edit it & watch the changes apply as you edit in the Markdown block. Changes display before you click Apply.
      • examples: 1em, 2em, 3em, etc., OR  1.2em, 1.65em, 3.5em, etc.

    What will that look like?

    font-size:2em;

    instead of:

    font-size:1em;

     

    COLOR: 
    To change the color of the text, delete the number after the pound or hashtag symbol (#), and replace it with your own number. Again, leave all punctuation as is.

    Don't know what Hex code you're looking for? Here's a great tip, go to: www.coolors.co. They're free to use, and a great resource! You can generate new random color palettes there, create & export your own custom color palettes, and see the all the color information that makes up those colors including the RGB, CMYK, HEX and Pantone colors. It's an amazing tool!

    So, say you want a lime green for the text in your Markdown block, but you don't have a CLUE what HEX color that would be. Go to Coolors, and click on the Adjust icon in any of the colors that automatically come up. Then use the sliders to create the color you're looking for.

    Watch it below, if you want to see it in action!

    My example is moving a little fast, I know, but once you get the color you want with the sliders, just select the hex code at the bottom (#79DC57 for the lime green, in this case) and right click on your selection. Then click Copy (Command + C on a Mac), and go back to your Squarespace window, and paste it (Command + V on a Mac) into your Markdown block (make sure you keep the # symbol or it won't work!) 

    After you make the changes, your new Markdown Text will display like this:

    Example Text

    To save them, make sure you click Apply!

    Great! Now, I know you don't want it to say "Example Text." So how the heck do you change the text itself? Keep reading!

     

    4

    Write in your own text

    Just click inside the code and select where I've written Example Text, between the angle brackets (> <).

    Remove my "Example Text" and replace it with whatever you'd like it to say instead.

     

    ALIGNMENT:
    The default paragraph alignment in Markdown seems to be Left Align. If you find that you want to Center-Align or Right-Align your text instead, that requires an additional line of code, and I'll give that to you as well!

    Paste this code in, BEFORE the code I gave you earlier.

    <div style="text-align:left">

    All you have to do is swap out the last bit, "left" for "center" or "right" instead. So if you want your text to be centered, then type or paste in this:

    <div style="text-align:center">

    If you want your text to be right aligned, then type or paste in this:

    <div style="text-align:right">

    So now, all of your Markdown text should look like this:

    <div style="text-align:center"><span style="font-family:Raleway; font-style:bold; font-size:2em; color:#79DC57">Example Text</span>

    Which displays like this:

    Example Text

    LEADING (Line Height):
    If you need to adjust the spacing between lines of text, then paste in this code too:

    line-height:1em;

    Change the number of ems to suite you. Now, your Markdown text should look like this (the code above, was added in bold below):

    <div style="text-align:center"><span style="font-family:Raleway; font-style:bold; font-size:1em; line-height:1em; color:#79DC57">Example Text</span>

    See? It's not that hard, if you pay attention to details! :)

     

    5

    Adding a new paragraph

    Wherever you need to add a new paragraph, start by typing or pasting the start & closing paragraph tags at the end of your current paragraph, like this:

    ...end of an example sentence.<p></p>

    That ends the current paragraph. To start a new one, hit enter on your keyboard again.

    Like in Microsoft Word, or Mac's Pages, when you hit enter the first time, your cursor goes to the next line. It does start a new paragraph, but doesn't give you the space between them until you hit enter a 2nd time.

    Think about it that way, and do that here. To put space between your paragraphs, add the next set of text on a new line in your Markdown window, then add the starting & closing paragraph tags, like this:

    <p>PLACE NEW PARAGRAPH TEXT INSIDE, HERE.</p>

    So now your coded text looks like this:

    ...end of an example sentence.<p></p>
    <p>PLACE NEW PARAGRAPH TEXT INSIDE, HERE.</p>
    

    That's equivalent to hitting enter on your keyboard 2x in Microsoft, basically, and here's what that looks like in your Markdown Block:

     
     

    Which displays like this, below:

    Example Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    PLACE NEW PARAGRAPH TEXT INSIDE, HERE.

    See? You can do this! Just don't forget to replace my sample example text with yours! 

     

    That's it! That's the basics of Markdown.

    Now take a whack at it yourself! Have you been wanting to try a new font for larger introduction text, or a new font for quotes or client reviews? Your new attention-grabbing text could look like this:

    Try it yourself!

    or this!

    Try it yourself!

     

    Here's an example of styled paragraph text:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

     
     

    The code for that paragraph above is:

    <div style="text-align:left"><span style="font-family:Raleway; font-style:italic; font-size:1.5em; color: #7EA3AC; line-height: 1em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<p></p>
    
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></span></div>
    

    Extra Notes:

    • Keep your tags closed!
      • When you start or edit a tag, never delete anything in brackets, and keep punctuation where it is, except within the areas of your own paragraphs, where you can type and edit pretty normally.
      • Always close it when you're done with that area in the code, if that closing tag isn't there already from whatever you've pasted or typed in.
      • Example: a paragraph tag starts with <p>, and ends with </p>
        • <p>Your paragraph text here</p>
    • If the font or style you chose isn't working, make sure it's available in Squarespace (in your Style Editor) and that you're spelling it correctly and using the appropriate language for the style. (i.e.: bold vs. black, regular vs. light).
      • The fonts you're using in Squarespace, are likely Google fonts, unless you're using Adobe TypeKit.
      • I've also found that Markdown can be tricky when it comes to using certain weights for fonts like Brandon Grotesque, since it sometimes lists it as Light, Bold, etc. and sometimes its weights are listed with numbers like: 300, 600, 900, etc.

    That's it, my friend!
    Now try it & let me know how it goes! 
    :)


    HAVE OTHER COMMENTS ABOUT THIS ARTICLE OR SUGGESTIONS FOR A NEW BLOG? COMMENT BELOW! I'D LOVE TO HEAR FROM YOU!

    Katelyn Dekle

    Studio 1862, P.O. Box 244, Calvary, Ga, 39828

    I'm a freelance graphic designer. I've been designing for 10 years, and still love it! My passion is helping small businesses, startups and entrepreneurs become successful by providing professional branding and website design services.

    What do you need help with right now? Visit my website for advice from my blog, sign up for my newsletter + access to freebies, or follow me on Twitter, Facebook, Instagram or Pinterest to stay connected! =) 

    Follow