How To Add Custom Fonts To Squarespace - EASY TUTORIAL
Вставка
- Опубліковано 1 жов 2024
- Want to add your custom brand fonts into you Squarespace website. We are showing you how in this short video tutorial.
PLEASE NOTE: Squarespace recently made some changes to their backend. If you do not see the design tab mentioned in the video you can hit the website tab and then website tools at the bottom, from there you should be able to access the CSS panel.
The code used in the video is linked below. You can access the blog here thelaunchhive.c...
// CUSTOM FONT
@font-face {
font-family: 'FONTNAME';
src: url();
}
h1 {
font-family: 'font-name';
font-size: 20pt;
letter-spacing: 1px;
line-height: 140%;
}
h1 = Heading 1
h2 = Heading 2
h3 = Heading 3
h4 = Heading 4 -
p = All Paragraph fonts
p.sqsrte-large = Paragraph 1 / Large Paragraph
p.sqsrte-small = Paragraph 3 / Small Paragraph
✨SUBSCRIBE FOR NEW VIDEOS ALL ABOUT BRANDING YOUR BUSINESS
Join my email list: view.flodesk.c...
🍯Check out my portfolio and services here: www.thelaunchhive.com
🤘Follow me on Instagram - / thelaunch_hive
🤘Follow me on Pinterest - / thelaunchhivecreative
🤘Follow me on TikTok - @thequeenbee_ak
🖤ABOUT ME: I'm Amanda a self taught designer who helps other business owners dream up, create, and launch a bold and badass brand they are proud of.
Thanks so much for watching!
Hey there! That was so helpful, thank you so much! I was wondering if there is any code for adding a custom font to the menu header. It seems that a different setting is needed. Thank you!
For some reason this is not working for me, nothing happens :( any idea what I could do?
Can you add custom fonts into Squarespace 7.1?
@@AshtonKonicek yes, this tutorial is in 7.1
Did not change the font on the mobile version. Can you please help with that?
I have never had an issue with that - it should change for all. Sorry I am not much more help.
This is how you make a tutorial! thanks!
Thank you for your tutorial! I'm trying to change the newsletter (for a "subscribe" footer where clients can add their name and email address) font and can't figure out the code for that. Do you have that code?
Super helpful video, and up to date as of April 25th 2024. Thx!
THANK YOU SO MUCH! You have no idea how much this helps. I've been reading tutorials but I'm more of a visual learner so this is amazing.
Thank you, this was so clear and helpful.
This is super helpful, but my font is showing in all uppercase...is there a way to fix this?
Yes! To fix this head to edit>site styles (paint brush in upper right)>fonts from there go to the font that you are wanting to fix so if it is the header font go to headings> text transform and make sure that you have none selected. It is probably ticked on uppercase currently which is why it is showing in all uppercase. I hope this helps!
@@thelaunchhive Fixed it! Thank you so much!!
I have a question regarding mobile version. I'm struggling with my font as it doesn't render the same way it does with the fonts given by Squarespace. Do you know what could be the issue?
Have you used css to adjust your fonts the way you want them to be on mobile?
This really helped. I thought for sure I wouldn't get it right but you made the steps so clear and easy, thank you so much!!
Is there something else you want a tutorial on when it comes to Squarespace?
Thank you so much! Very helpful! ✨
Of course glad I could help!
Thank you!!! that it was exactly what I need it!!! ❤
Do you know how to add both the light and light-italic version of a font for the H1 on Squarespace 7.0?
I would think that you would have to do h1 the regular font and then h2 or h3 the italic. It's been awhile since I have been in 7.0 so I can't tell you specifically unfortunately
Hi! How should I customize the font for the site title? I've been looking everywhere but haven't been able to find this code!
I will paste a code below for you - make sure that you already have your custom font uploaded first. You want to make sure that you change the "font filename" to the name of your font. Hope this helps!
//Add custom font to site title//
#site-title {font-family: 'fontfilename';
}
THANK YOU SO MUCH!
Hello! Thank you for the helpful video. I was wondering how you have a mix of itallic and regular styles of your font in your h1 styles? I am trying to do a similar treatment with my font choices in Squarespace and having troubles figuring out how to do this.
Hi there, That is just how that font looks in italics it’s not a different font.
THANK YOU SO MUCH!
Super helpful,
What if I have bilingual website and I want to assign a custom font for each language?
That I am not sure on how to do unfortunately
literally saved my life thank u sm
I got lost at the part when you said “go to our code” i couldnt really see what you clicked on to bring that info up. Can you clear that up for me ?
You can find the code in the description of the video 😊
Such an easy way to explain everything! Thank youu
Perfect, thanks so much!
THANK YOU
are we able to change the 'miscellaneous' font option with the uploaded font as well?
I’m not entirely sure I have never tried that! Would love to know if you get it to work!
THANK YOU SO MUCH. This was exactly what i needed today,
You are so welcome!
What did you do on code line 3 when you highlighted the 'font name'? did you just type in the font name ?
Yes!
Thanks so much!
You’re so welcome!
"Syntax Error on line 5" I followed all steps :( What can I do?
You can copy and paste your code and I can try to figure it out for you
any chance you can help me with mine too? I have custom code from the theme template i've uploaded. I followed the instructions for the top and then changed the h4 that was there to the name of the font i want but it doesn't seem to do anything :( @@thelaunchhive
Thank you!
I don't have the "Design" menu in the dashboard. How can I find the Custom CSS menu?
Hey! Squarespace recently made some changes. You can find it by going to website on the panel and then website tools towards the bottom. You should be able to see css from there.
@@thelaunchhive Oh, right. Found it!
Got confused when I couldn't find all of the settings people had in the Design area. Thank you very much!
@@thelaunchhive Also, sorry to ask again but do you know why Custom CSS doesn't work?
The changes must've broken that function as well. Neither the fonts I added through CSS work nor any other adjustment I wanted to make.
Do you know why?
I do know that I have been having issues with this as well as other people. I have reached out to Squarespace who claim their engineers are working on this as something must have broken when they updated their system. This works on some of my sites currently and then some it goes off and then back on. Try reaching out to their customer care and see what they say.@@Adraverse
@@thelaunchhive Ah, I see. Welp, that sucks. Hopefully they'll find a fix for this ASAP. But I'll message them as well and see what they say...
Thanks for your help!
This was incredibly helpful for me as I begin to start my own business(es)!! Thank you and I hope you have much continued success!
I'm so glad! Thank you - you as well!
How can I use a custom font as a button font on squarespace?
You can use this code
/* button */
.sqs-block-button-element {
font-family: 'NAME OF YOUR FONT HERE' !important;
}
Hope this helps.
This was super helpful so thank you! I'd like to ask however how can I customize the font for main navigation?
Here is the code that you can use for that. You will need to make sure the font is already uploaded and then add that font name into the code.
This will update for desktop and mobile
.header-nav-item a, .header-menu-nav-item a {
font-family: 'YOURFONTNAMEHERE';
}
So helpful! Now for the footer...do I substitute your above code for the header with "footer"?@@thelaunchhive
@@reginajohnson9178 your custom fonts should automatically work in the footer with the original code in video
This was fantastic, thank you!
Although, I have a question: I am creating a new site for a client that has not launched yet, nor have I transferred the domain. These font changes aren't showing up even though I closely followed your steps🤔Is that because I have not fully launched the site, or just user error on my part?
Thanks so much.
It should work without having to launch the site but it must be noted that the site needs to be a business site not a personal one - that could be the issue? If not that maybe the code?
@@thelaunchhive It is in fact a business site. But still, my font is not appearing :(
Okay, user error - the site's default font packs were set to H2 by default😂Everyone, make sure you check what headings your templates default to! Thanks again for your help and this video!
@@mmazz414 ahh good catch!