Jump to content

CSS needed: to force website to display one font for body text and another font for H1,2,3 etc

Go to solution Solved by Web_Solutions,

Recommended Posts

Hi everyone!
I need your help 😃
I have uploaded two new fonts to the website that I am building. 
1) Raleway - for body text
https://static1.squarespace.com/static/65467d7ff3357b713413e9d9/t/654683eeb4aeb55afb815413/1699120111134/Raleway-Regular.ttf
2) Orbitron-Bold - for H1, H2 etc
https://static1.squarespace.com/static/65467d7ff3357b713413e9d9/t/654683bfb95974717c78d3e9/1699120063509/Orbitron-Bold.ttf

Could anyone kindly provide me with some code to force the website to display the content in these two fonts?

Thanks in advance! 🤗

Link to comment

Hi, please try this step-by-step guide. Do come back if you're stuck on anything!

https://www.sparkplugin.com/blog/custom-fonts-in-squarespace

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd

💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment

Hi Melody,

Thanks so much for the reply!

So, I followed your article (very helpful) and added this code to the CSS:

@font-face {
    font-family: Raleway;
    src: url(https://static1.squarespace.com/static/65467d7ff3357b713413e9d9/t/654683eeb4aeb55afb815413/1699120111134/Raleway-Regular.ttf);

.sqsrte-large, p, .sqsrte-small {
    font-family: 'Raleway';
 
@font-face {
    font-family: Orbitron-Bold;
    src:       
url(https://static1.squarespace.com/static/65467d7ff3357b713413e9d9/t/654683bfb95974717c78d3e9/1699120063509/Orbitron-Bold.ttf);}


h1, h2, h3, h4 {
    font-family: 'Orbitron-Bold';
}
}

But it doesn't look like it's displaying the header font correctly

Screenshot.png

Link to comment
1 hour ago, curlybirdie21 said:

Thanks so much for the reply!

But it doesn't look like it's displaying the header font correctly

You are welcome!

Try replacing with the below

@font-face {
    font-family: 'Raleway';
    src: url('https://static1.squarespace.com/static/65467d7ff3357b713413e9d9/t/654683eeb4aeb55afb815413/1699120111134/Raleway-Regular.ttf');
} 
 
@font-face {
    font-family: 'Orbitron-Bold';
    src:       
url('https://static1.squarespace.com/static/65467d7ff3357b713413e9d9/t/654683bfb95974717c78d3e9/1699120063509/Orbitron-Bold.ttf');}

In loading the font, I've added single quotes around the font-family name and around the url. Save and refresh page, let me know how it goes.

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd

💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment
  • Solution
4 hours ago, curlybirdie21 said:

Hi Melody,

Thanks so much for the reply!

So, I followed your article (very helpful) and added this code to the CSS:

@font-face {
    font-family: Raleway;
    src: url(https://static1.squarespace.com/static/65467d7ff3357b713413e9d9/t/654683eeb4aeb55afb815413/1699120111134/Raleway-Regular.ttf);

.sqsrte-large, p, .sqsrte-small {
    font-family: 'Raleway';
 
@font-face {
    font-family: Orbitron-Bold;
    src:       
url(https://static1.squarespace.com/static/65467d7ff3357b713413e9d9/t/654683bfb95974717c78d3e9/1699120063509/Orbitron-Bold.ttf);}


h1, h2, h3, h4 {
    font-family: 'Orbitron-Bold';
}
}

But it doesn't look like it's displaying the header font correctly

Screenshot.png

Replace your code with the code below.

@font-face {
  font-family:'Raleway';
  src: url(https://static1.squarespace.com/static/65467d7ff3357b713413e9d9/t/654683eeb4aeb55afb815413/1699120111134/Raleway-Regular.ttf);
}
@font-face {
  font-family: 'Orbitron-Bold';
  src: url(https://static1.squarespace.com/static/65467d7ff3357b713413e9d9/t/654683bfb95974717c78d3e9/1699120063509/Orbitron-Bold.ttf);
}

.sqsrte-large, p, .sqsrte-small {
    font-family: 'Raleway' !important;
}
h1, h2, h3, h4, .list-section-title p {
    font-family: 'Orbitron-Bold' !important;
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

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.