Тёмный

How To Add Custom Fonts To Squarespace - EASY TUTORIAL 

The Launch Hive Creative
Подписаться 172
Просмотров 14 тыс.
50% 1

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.com/the-blog/cus...
// 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.com/pages/60438f...
🍯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!

Опубликовано:

 

19 янв 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 66   
@celestealison6219
@celestealison6219 2 месяца назад
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.
@BeliefInLeif
@BeliefInLeif 3 месяца назад
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!!
@ellaclarke8814
@ellaclarke8814 8 месяцев назад
Thank you, this was so clear and helpful.
@adinacoteanu
@adinacoteanu 5 месяцев назад
Such an easy way to explain everything! Thank youu
@axelzapata1084
@axelzapata1084 3 месяца назад
Thank you!!! that it was exactly what I need it!!! ❤
@annadronova8782
@annadronova8782 9 месяцев назад
Thank you so much! Very helpful! ✨
@thelaunchhive
@thelaunchhive 9 месяцев назад
Of course glad I could help!
@TravelWithMelon
@TravelWithMelon Год назад
THANK YOU SO MUCH. This was exactly what i needed today,
@thelaunchhive
@thelaunchhive Год назад
You are so welcome!
@miandyou6445
@miandyou6445 3 месяца назад
literally saved my life thank u sm
@Silent-Starlight-ASMR
@Silent-Starlight-ASMR 11 месяцев назад
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!
@thelaunchhive
@thelaunchhive 11 месяцев назад
I'm so glad! Thank you - you as well!
@leilanipatrick111
@leilanipatrick111 4 месяца назад
Perfect, thanks so much!
@AbdulQuddus-kg3wc
@AbdulQuddus-kg3wc 2 месяца назад
THANK YOU SO MUCH!
@eduardalcamargo
@eduardalcamargo 2 месяца назад
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!
@anantagaura
@anantagaura 7 месяцев назад
This is how you make a tutorial! thanks!
@willsaenz6320
@willsaenz6320 2 месяца назад
Super helpful video, and up to date as of April 25th 2024. Thx!
@lchaim1754
@lchaim1754 Месяц назад
THANK YOU
@sikebakare6690
@sikebakare6690 7 месяцев назад
Thank you!
@user-pe3ks5pl6i
@user-pe3ks5pl6i 5 месяцев назад
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?
@user-sc7zn2lm1t
@user-sc7zn2lm1t 7 месяцев назад
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.
@thelaunchhive
@thelaunchhive 7 месяцев назад
Hi there, That is just how that font looks in italics it’s not a different font.
@RashawndaJames
@RashawndaJames Год назад
Thanks so much!
@thelaunchhive
@thelaunchhive Год назад
You’re so welcome!
@NourLivia
@NourLivia 11 месяцев назад
For some reason this is not working for me, nothing happens :( any idea what I could do?
@wildhoodshop
@wildhoodshop 11 месяцев назад
Do you know how to add both the light and light-italic version of a font for the H1 on Squarespace 7.0?
@thelaunchhive
@thelaunchhive 11 месяцев назад
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
@ekinalemdar388
@ekinalemdar388 11 месяцев назад
This was super helpful so thank you! I'd like to ask however how can I customize the font for main navigation?
@thelaunchhive
@thelaunchhive 11 месяцев назад
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'; }
@reginajohnson9178
@reginajohnson9178 5 месяцев назад
So helpful! Now for the footer...do I substitute your above code for the header with "footer"?@@thelaunchhive
@thelaunchhive
@thelaunchhive 5 месяцев назад
@@reginajohnson9178 your custom fonts should automatically work in the footer with the original code in video
@mmazz414
@mmazz414 Год назад
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.
@thelaunchhive
@thelaunchhive Год назад
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?
@mmazz414
@mmazz414 Год назад
@@thelaunchhive It is in fact a business site. But still, my font is not appearing :(
@mmazz414
@mmazz414 Год назад
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!
@thelaunchhive
@thelaunchhive Год назад
@@mmazz414 ahh good catch!
@user-uv7tl4pl6f
@user-uv7tl4pl6f Год назад
What did you do on code line 3 when you highlighted the 'font name'? did you just type in the font name ?
@thelaunchhive
@thelaunchhive Год назад
Yes!
@wap1111
@wap1111 11 месяцев назад
Super helpful, What if I have bilingual website and I want to assign a custom font for each language?
@thelaunchhive
@thelaunchhive 11 месяцев назад
That I am not sure on how to do unfortunately
@blakeknecht8628
@blakeknecht8628 11 месяцев назад
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!
@thelaunchhive
@thelaunchhive 11 месяцев назад
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'; }
@thelaunchhive
@thelaunchhive Год назад
Is there something else you want a tutorial on when it comes to Squarespace?
@t3ay
@t3ay 8 месяцев назад
are we able to change the 'miscellaneous' font option with the uploaded font as well?
@thelaunchhive
@thelaunchhive 8 месяцев назад
I’m not entirely sure I have never tried that! Would love to know if you get it to work!
@adinacoteanu
@adinacoteanu 5 месяцев назад
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?
@thelaunchhive
@thelaunchhive 5 месяцев назад
Have you used css to adjust your fonts the way you want them to be on mobile?
@karahkay_hairdesign9868
@karahkay_hairdesign9868 Год назад
This is super helpful, but my font is showing in all uppercase...is there a way to fix this?
@thelaunchhive
@thelaunchhive Год назад
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!
@karahkay_hairdesign9868
@karahkay_hairdesign9868 Год назад
@@thelaunchhive Fixed it! Thank you so much!!
@MirandaCorwin
@MirandaCorwin 3 месяца назад
Did not change the font on the mobile version. Can you please help with that?
@thelaunchhive
@thelaunchhive 3 месяца назад
I have never had an issue with that - it should change for all. Sorry I am not much more help.
@blackbeach
@blackbeach Год назад
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 ?
@thelaunchhive
@thelaunchhive Год назад
You can find the code in the description of the video 😊
@elijahakintimehin6173
@elijahakintimehin6173 Год назад
How can I use a custom font as a button font on squarespace?
@thelaunchhive
@thelaunchhive Год назад
You can use this code /* button */ .sqs-block-button-element { font-family: 'NAME OF YOUR FONT HERE' !important; } Hope this helps.
@Adraverse
@Adraverse 10 месяцев назад
I don't have the "Design" menu in the dashboard. How can I find the Custom CSS menu?
@thelaunchhive
@thelaunchhive 10 месяцев назад
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.
@Adraverse
@Adraverse 10 месяцев назад
@@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!
@Adraverse
@Adraverse 10 месяцев назад
@@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?
@thelaunchhive
@thelaunchhive 10 месяцев назад
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
@Adraverse
@Adraverse 10 месяцев назад
@@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!
@joseandresalvear4752
@joseandresalvear4752 11 месяцев назад
"Syntax Error on line 5" I followed all steps :( What can I do?
@thelaunchhive
@thelaunchhive 11 месяцев назад
You can copy and paste your code and I can try to figure it out for you
@neelamkaur656
@neelamkaur656 7 месяцев назад
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
@AbdulQuddus-kg3wc
@AbdulQuddus-kg3wc 2 месяца назад
THANK YOU SO MUCH!
Далее
3 KEY Web Design Principles
9:15
Просмотров 656
Looks realistic #tiktok
00:22
Просмотров 11 млн
How to Add Custom Fonts in Squarespace 7.1
9:13
Просмотров 1,2 тыс.
CSS for Squarespace | The Essential Beginner Tutorial
12:57
Squarespace How to Change Fonts
12:07
Просмотров 845
How to Upload CUSTOM FONTS to Squarespace
15:06
Просмотров 11 тыс.
Why is THIS the Perfect Homepage?
14:21
Просмотров 513 тыс.