curlybirdie21 Posted November 8 Share Posted November 8 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
melody495 Posted November 8 Share Posted November 8 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 Developer You dream it, I'll make it happen. Contact me: 💻 melodylee.tech ✉️ my email 📍 UK based. The great thing about the internet, we can work together from anywhere. #neverstoplearning ☕ I like coffee 😊 Link to comment
curlybirdie21 Posted November 9 Author Share Posted November 9 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 Link to comment
melody495 Posted November 9 Share Posted November 9 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 Developer You dream it, I'll make it happen. Contact me: 💻 melodylee.tech ✉️ my email 📍 UK based. The great thing about the internet, we can work together from anywhere. #neverstoplearning ☕ I like coffee 😊 Link to comment
Solution Web_Solutions Posted November 9 Solution Share Posted November 9 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 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; } curlybirdie21, Kobir and Ainul 2 1 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
curlybirdie21 Posted November 9 Author Share Posted November 9 That did it! Thank you so so sooooo flippin much! You're ACE! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment