Тёмный

How To Add And Use A Custom Font In Squarespace 

Kayleigh Noele Web Design
Подписаться 586
Просмотров 44 тыс.
50% 1

Adding a custom font in Squarespace is really easy. Just use the following CSS:
@font-face {
font-family: 'NAME';
src: url('FONT URL');
}
h1 {font-family: 'NAME';}
Simply scroll down to just below the CSS window and click 'Manage Custom Files'. Then, select the font file you want to upload from your computer and boom... step one complete.
Then, paste in the CSS and replace NAME with the name you'd like Squarespace to recognise the font by, and URL with the URL of the font you just uploaded. You can find this by going back to 'Manage Custom Files' and clicking on the font. The link will insert automatically wherever your cursor is currently placed.
Finally, add the final line of code.
h1 {font-family: 'NAME';}
Squarespace uses h1, h2, h3 and body/p text by default. Change 'h1' if you want it to be h2 etc and then change NAME to the name you just gave the font in the previous step. And that's it!
If you want to take it further, you can add styling for size, spacing, shadow, line height... etc etc.
Please like and subscribe if you found the video useful and let me know in the comments on through my blog if there is you would like me to make a Squarespace SOS video on!

Хобби

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

 

8 авг 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 94   
@DolisterCovers
@DolisterCovers 5 лет назад
You are THE BEST for including the text in the description omg, thank you!!!!
@sanctuaryskies
@sanctuaryskies 3 года назад
I’m just starting my own Ss and I found you!!! Thank you! Love how you explained and your content! Keep it up! 🙏🏼💯✌🏼💕❤️
@maddisonmcburnie1438
@maddisonmcburnie1438 4 месяца назад
This was so helpful! Can't thank you enough as a small business owner just getting started and trying to function "bare bones" and do it myself. I'm in healthcare, not coding so this was a lifesaver for my website!
@mind.aroma.skin.3774
@mind.aroma.skin.3774 5 лет назад
Awesome! Never used this CSS thing before... Thanks for the straightforward explanation! Just signed up to see if you have other useful stuff!
@Emily-pd5fu
@Emily-pd5fu 4 года назад
Thanks so much Kayleigh, I’ve never done coding before and this makes so much sense. I’m new to Square Space and it was super daunting until I found your videos. Thanks love - and big up the North ✊🏼🔥❤️
@leighoehmler7664
@leighoehmler7664 4 года назад
Thank you, Kayleigh! This was so extremely clear and helpful. You just saved me.
@WookieeTV
@WookieeTV 4 года назад
I was honestly ready to bin Squarespace off as my upgrade site from Adobe portfolio due to it not being able to upload my fonts... this made me realise I need to learn CSS! Onwards and upwards keep this going please!
@cjforlife121
@cjforlife121 4 года назад
This was SO perfect, easy + honestly really fun to follow! Thank you so much!!
@cooper_fidden_racing
@cooper_fidden_racing 3 года назад
Thank you so much - was very easy to follow and very thorough. Really simplified the process!
@samanthastupica5138
@samanthastupica5138 3 года назад
Thank you so much for posting this super easy to follow tutorial! You seriously helped me out with my site's branding, as little as this may seem! I'm a graphic designer but (unfortunately) have a limited knowledge of CSS and am learning as I go!
@DirtyFunkyTunes
@DirtyFunkyTunes 4 года назад
This video was so incredibly helpful to me. Thank you SO much.
@mctonky
@mctonky 2 года назад
So simple. Thank you!
@ashleykrato1510
@ashleykrato1510 4 года назад
Such a great walkthrough! Thank you so much!
@EngravedLLC
@EngravedLLC 4 года назад
This was SO HELPFUL!!! Thank you so much!!!
@livefeedpro5391
@livefeedpro5391 5 лет назад
Really clear and concise how to video :) Thank you
@movewithmariko1120
@movewithmariko1120 4 года назад
This so clear and easy to follow - thanks!
@JennyValles
@JennyValles 5 лет назад
Thank you for sharing! This is such a helpful tutorial.
@caroladams2541
@caroladams2541 3 года назад
Thank you so much! This was exactly the answer that I needed!!!
@coolcubestudio
@coolcubestudio 4 года назад
THANK YOU! So easy to follow along.
@taushawierlo
@taushawierlo 3 года назад
Amazing! Thank you for such a great tutorial! IT WORKED!
@kasiape2699
@kasiape2699 5 лет назад
so good, thank you for the text in video description!
@amandatuft8982
@amandatuft8982 4 года назад
What a terrific tutorial, thank you!
@allieh5507
@allieh5507 4 года назад
This helped me so much! Wow - I just upleveled my website!
@Beyoutifulliving
@Beyoutifulliving 5 лет назад
Thanks so much for this! Super helpful.
@josedlopez5709
@josedlopez5709 4 года назад
Great explanation. Thank you!!!
@Waynaworld
@Waynaworld 4 года назад
super freaking helpful! Thank you sooo much!
@DaudAlzayer
@DaudAlzayer 3 года назад
Thanks so much- I was stuck on this problem.
@PriscillaSmithAdvocareBride
@PriscillaSmithAdvocareBride 4 года назад
Thanks so much this was very helpful!
@angelvanas2020
@angelvanas2020 5 лет назад
So... this is the best! Thank you! You are the only one who showed me how to do this well. And including the code in the text... fucking amazing! You madam, have saved a life today!
@DrCyam
@DrCyam 5 лет назад
very clear- thank you!
@AllieKnullsphotography
@AllieKnullsphotography 4 года назад
Thank you so much! You made this really easy to understand. How do you add another font for h2 & h3?
@willbeazer9730
@willbeazer9730 4 года назад
thanks this was very easy and super helpful
@nataliesowa4307
@nataliesowa4307 3 года назад
Thank you so much for this!
@hamborski
@hamborski 5 лет назад
super helpful. thank you. Im looking to change some type on Henson template., but don't know the Heading Style ID.
@oktopusfitnessclub3416
@oktopusfitnessclub3416 4 года назад
This was very helpful! Thank you! Can you please let me know how to code that the size of the font shrinks accordingly to resolution and not to be fixed? Thank you!
@niluamali6440
@niluamali6440 4 года назад
This video was so helpful, wow, thank you! So if you want to upload multiple fonts, do you just repeat the process below the first code?
@kennyhunte4833
@kennyhunte4833 4 года назад
this worked great!! thank you for the tutorial. Is there a way to apply this code to the tagline?
@LoFiSymphony
@LoFiSymphony 5 лет назад
Thank you!
@maryammyikaday6852
@maryammyikaday6852 5 лет назад
so helpful -- I want to change the font in the pop-up promotional bar. Can you do a video on that?
@hugoknapp3532
@hugoknapp3532 3 года назад
Thank you for the video! What code injection do I use to add capitals and lower case?
@rightathomestagingsapphire1464
@rightathomestagingsapphire1464 4 года назад
This is amazing, thank you so much! My font is only appearing in upper case for H2, could it be because its H2?
@ErikaGarcia-on1fz
@ErikaGarcia-on1fz 3 года назад
thank you so much for this video- it really helped. I just have a question: what about if I want the same font for all H1, H2 and H3- what do I do after I am done with H1, or do I add H1, H2, H3? thanks!
@tomzer1
@tomzer1 5 лет назад
I'm new to using custom / uploaded fonts to Squarespace, so your detailed explanation is appreciated. Great job! One detail I was curious about happened when you uploaded a font. I noticed that it appeared to be a standard OTF font (extension) and not a web font. Are regular fonts allowed, or do they have to be formatted as web fonts? Thanks.
@DustyMarshall
@DustyMarshall 5 лет назад
great video
@TiroTekkers
@TiroTekkers 3 года назад
Great video! Is it possible to only change font on one single page?
@DanaDDub
@DanaDDub 4 года назад
Thank you, how do i use a custom font for my site title (logo) in 7.1? - do you have any css for that? Thanks in advance
@truonghoaithu3678
@truonghoaithu3678 4 года назад
This was helpful
@starletjackson5359
@starletjackson5359 6 лет назад
please make more videos! thank you!
@andreasrossmann4747
@andreasrossmann4747 4 года назад
Hi, great video - it helps a lot! I'm using HARRIS template but ony paragaph type works. No heading (h1,h2,..) Any idea how to change it? Thanks in advance!
@renchinzonbo4736
@renchinzonbo4736 4 года назад
Kayleigh Noele thank you so much, this is very helpful. How to change the same font for header?
@juliterr
@juliterr 4 года назад
yass thans for this!
@heatherbroomhall
@heatherbroomhall 5 лет назад
How do you change the Navigation Link Font on Page Headers or Mobile Menus?
@NourLivia
@NourLivia Год назад
I don't know if anything changed with the new version of Squarespace but I followed the tutorial exactly and nothing is changing :( any advice?
@brandonbourne398
@brandonbourne398 5 лет назад
What would I change to make the custom font change the tagline type
@anikasaigal584
@anikasaigal584 5 лет назад
Adding an h1 text shadow also adds it to the site title. Is there a way to stop this? Also - text shadow the only css attribute that changes in the site title. Is there a way to use my custom font for the title?
@micheledeeann2566
@micheledeeann2566 6 лет назад
Hi there. How do you keep the custom font from the CSS code to show up on mobile?
@MandyAmelia
@MandyAmelia 3 года назад
Can this be done in the opt in forms where the font is tiny.
@AsiansAreNotC00L
@AsiansAreNotC00L 4 года назад
My issue is that the font is only on heading 2 but not the rest even though I typed it right for the the body and heading 1
@luisfelipetenorio5485
@luisfelipetenorio5485 4 года назад
Hi Kayleigh. Great video I don't know if my question exceeds the scope of your help. If so, please forgive me. If I want to change just ONE h1 block, should I just change the first line @font-face for #block-BLOCKID?
@chloe-gy2hb
@chloe-gy2hb 3 года назад
This is great thanks! Can I apply this custom font to all my h1, h2, h3 and p?
@kayleighnoelewebdesign8615
@kayleighnoelewebdesign8615 3 года назад
Yes it works for all of them
@CRM1997
@CRM1997 4 года назад
how do you change the font in the actual header of the web page?
@dwill4450
@dwill4450 3 года назад
Thank you for sharing! This is great. If you or anyone can help with how to display the custom font on mobile and tablet that would be great. Currently, it only displays on desktop view.
@kayleighnoelewebdesign8615
@kayleighnoelewebdesign8615 3 года назад
It should work on all devices ... must be something amiss on your site or CSS
@kathrynbethard8632
@kathrynbethard8632 4 года назад
This is working when I edit the H3 text, but it doesn't change anything when I set it to change the H1 text. What could be the reason for this?
@ashmo5561
@ashmo5561 2 года назад
could someone please explain why a font does not display correctly for all letter characters despite the code being correct?much appreciated.
@eyesavvydesign
@eyesavvydesign 3 года назад
Hi! for some reason this is not changing on my blog H1.
@thesmilinsammyj
@thesmilinsammyj 4 года назад
Ahh this is so good, but I still can't get find my font anywhere when I try to upload it. Send help!
@santiagomaldonado510
@santiagomaldonado510 5 лет назад
what is the code for the navigation buttons? plz
@steffenkommunikationbrandi6919
@steffenkommunikationbrandi6919 3 года назад
Hallo, thank you but I am still confused. How can I upload 2 different Fonts (Font Bold) one for H1, H2, hH3 and another Font (Font regular) for Copy? I tried it but it doesn´t work.
@saradicarlo723
@saradicarlo723 4 года назад
I can't seem to change the size of the font, can anyone send me the code for it.
@jwill2700
@jwill2700 3 года назад
This was very helpful but is there anyway to change the font in the header?
@invade81
@invade81 3 года назад
.header-title-text { font-family:FONTNAME; }
@HJPitchers
@HJPitchers 4 года назад
Struggling to understand what "paste in the CSS" means. Any help would be great, ta!
@ams3129
@ams3129 4 года назад
how do you find the fonts css im using dafonts website
@elisafox5834
@elisafox5834 5 лет назад
This is amazing, thank you! Do you know how to apply custom fonts to a gallery title?
@bencorrado7616
@bencorrado7616 4 года назад
this would be helpful
@mollydeacon3863
@mollydeacon3863 3 года назад
@@bencorrado7616found this code searching around #site-title {font-family: 'Example'; src:local('Example'), url(static1.squarespace.com/static/5683f9f1cbced6d45d92de3d/t/56855928e0327c02e3702e57/1451579688037/Example.otf)} Here's the article: forum.squarespace.com/topic/50025-how-to-change-site-title-to-use-custom-font/
@ligiaponce216
@ligiaponce216 4 года назад
HI! I believe I've done everything on the tutorial? but then again I cannot seem to manage any changes, the tutorial seems fairly simple but I don't understand what it is that I might be doing wrong. Even when i save it nothing seems to have been affected, doesn't matter if i type h1 or body ...
@cintya7
@cintya7 4 года назад
same here!! :(
@aimeeboehmke8277
@aimeeboehmke8277 3 года назад
Is there ever a situation where the font you import into Squarespace won't allow you to change the colour or add a text-shadow. For some reason, Squarespace will allow me to do everything else but these two things.
@kelliejophotography9984
@kelliejophotography9984 4 года назад
Hi Kayleigh If there already is custom css where do I add the code at the beginning or the end?
@kelliejophotography9984
@kelliejophotography9984 4 года назад
Thank you so much for replying I tried it anyway and kept my fingers crossed! 😂
@susanlee2501
@susanlee2501 4 года назад
Hey, for some reason this didn't work for me! I copy pasted your code and followed the instructions... I then re-tried with a .WOFF and .WOFF2 font, but I don't see the changes reflected in the website preview, let alone the final website. Do you have any suggestions on what else might be preventing me from adding a custom font?
@snipesclass
@snipesclass 4 года назад
didn't work for me either. idk what im doing wrong i've done everything to the T. even tried with otf and offsite fonts like how she is doing. nothing.
@itsreashilian
@itsreashilian 3 года назад
it's not showing up on mine! whyyyy 😭
@katehavercroft4940
@katehavercroft4940 4 года назад
hey i swear i followed this to a T but nothing is happening @font-face { font-family: 'PERTH'; src: url('static1.squarespace.com/static/5547eb0de4b017412aefe234/t/5ed2b24ad1fbb47d9724dfa3/1590866506764/PerthSerif-Regular.otf'); } h1 {font-family: PERTH;} do i have to "reset" the assigned h1 h2 fonts in the style editor or anything?
@iloveyou14378
@iloveyou14378 4 года назад
I am having the same issue :/
@julesbressani5269
@julesbressani5269 4 года назад
Heart attack right off the start
@exploringnorthga1861
@exploringnorthga1861 3 года назад
How do you add a custom font without assigning it to a header?
@kayleighnoelewebdesign8615
@kayleighnoelewebdesign8615 3 года назад
You'll need to assign it to something to make it show up on your site.
@briarcroftlane
@briarcroftlane 3 года назад
So helpful, thank you so much!
Далее
Layering Gaphics in Squarespace
10:26
Просмотров 13 тыс.
13 Things To Remove From Your Website Immediately
12:33
51 Squarespace Tips for Creating an Amazing Website
18:32
Easily Improve Your Web Design (With Example)
17:59
Просмотров 46 тыс.