Jump to content

Customizing Fonts

Recommended Posts

Site URL: https://emilytraub.com/work/sf-usability-report

Hello!

I'm new to squarespace and have been using both Custom CSS and Markdown blocks to customize my fonts across my site (Rubik and Red Hat Text) - however, I found that neither of the two fonts I was using were appearing when other people viewed them on their own devices (they only saw the fonts from the default font 'pack'). So, I went to the "fonts" section under "design", found one of my fonts (Rubik, the one that I'm using for headings), and selected it, but couldn't find the second, so am continuing to specify it only using markdown blocks. After I did this,

I noticed that all my headings are (for the most part haha! Sometimes they will switch back while I'm editing my website) displaying with a very light weight (looks around 300, even though it's supposed to be 500) and I'm not sure how to change it! It's like the font pack is overriding the changes i'm trying to make?

Any help would be very much appreciated!

 

Screen Shot 2021-02-21 at 5.54.56 PM.png

Screen Shot 2021-02-21 at 5.55.27 PM.png

Link to comment
  • Replies 6
  • Views 944
  • Created
  • Last Reply

Try this code

@font-face {
    font-family: "Red-Hat-Text";
    src: url('https://static1.squarespace.com/static/5ff380733fe4fe33db92dcd1/t/5ff49a9e1a1a75700e33ba27/1609865887104/RedHatText-Regular.ttf')
}

p {
    font-family: "Red-Hat-Text",sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6875em;
    color: #3f3f3f;
}

 

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

Thank you so much, that did it!

18 hours ago, tuanphan said:

Try this code


@font-face {
    font-family: "Red-Hat-Text";
    src: url('https://static1.squarespace.com/static/5ff380733fe4fe33db92dcd1/t/5ff49a9e1a1a75700e33ba27/1609865887104/RedHatText-Regular.ttf')
}

p {
    font-family: "Red-Hat-Text",sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6875em;
    color: #3f3f3f;
}

 

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

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