Customizing Fonts

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!

Hi. What is access password?

cca

18 hours ago, Emily_20 said:

cca

Just got rid of the password!

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;
}

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;
}

 

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?