Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Customizing Fonts


Emily_20

Question

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

Edited by Emily_20
Link to post
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Hi. What is access password?

Try this code @font-face { font-family: "Red-Hat-Text"; src: url('https://static1.squarespace.com/static/5ff380733fe4fe33db92dcd1/t/5ff49a9e1a1a75700e33ba27/1609865887104/RedHatText-Regula

Posted Images

6 answers to this question

Recommended Posts

  • 0

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 post
  • 0

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 post
  • 0
On 3/2/2021 at 8:08 AM, Emily_20 said:

Thank you so much, that did it!

 

I see huge white space on right of screen on mobile. Do you want to fix this?

image.thumb.png.020cc7f744f71256afab467b28d9fbfa.png

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...