Thanks for this! Your method seems like an easier way to add custom fonts than some of the other tutorials I've watched so far. For the emphasis, would you do the same for the Bold typeface as well?
Hi Sharon, very helpful! However I realized that for the italicized font, I tried to do it like yours but it does not work on the mobile. So desktop version works perfectly but when I switched to mobile it does not applied there..
Hmmm... that is not good. Without seeing all the code in your site, it's difficult to know what's going on. Are you a member of the Squarespace circle? In there you can post your questions with a link to your url, and show the code you're using and if anything is conflicting that might cause the mobile to be off. I'm in there but there's also many Squarespace experts in there who can look into it for you. If you're not a Circle member there's also a Squarespace Community Facebook group that I am in as well if you post your question there.
I would double check that the testimonial font is assigned to the same heading you have the custom font on. Go to the styles>fonts>assign fonts>List Section>Title. You can set it to whichever heading you have the custom font assigned to. That should solve it but if it's still not showing up, you might need to go a more specific route and use the selector ID to identify that title in CSS and assign it the custom font.
1. Go to fonts.adobe.com and find the font you want. 2. Click on icon. It will ask you to add it to a project -- create one for your website. 3. Adobe will give you 2 pieces of code. The first you need to put in your site's header. You can find this by going to Website > Website Tools > Code Injection 4.Go to Website > Website Tools > CSS and add second code: @font-face { copy / paste all the provided css font here }
@@SharonMarta One more question... I love the Editor font, but if I only use it for headings do I need all 16? Will one do? If so, which would you recommend.
So glad you liked the video. My advice would be make sure everything is exactly as it should be in the code. Even the slightest error will break it. In your specific case, I would need to see your code to be able to help. Are you a Squarespace designer? If you are, the circle membership is a great place to post your code so someone can look at it for you. Or you can paste your code below and I can review it.
Hi Sharon! Thanks so much for this. Helped so much! I was able to implement the custom fonts for heading and paragraphs. However, the blocks and the font in the header are not updating for me. I've tried troubleshooting and I'm hitting a wall. Do you have any insight that might help me?
@@LaraS-bw9px Ahhhh... I don't normally change the fonts on the buttons, just because I want to make sure those are easy to read. But you can customize buttons with different CSS code. @insidethesquare probably has a video for customizing the font in buttons with CSS code.
Thanks so much for this video, unfortunately, I tried to upload an adobe font, I dragged in the font from where it is on my mac, but the Squarespace fonts did not change :/ Any help with that would be appreciated.
Thanks for sharing, this was extremely helpful! It won’t let me copy the code in your description. Is there anyway you can post it on the comments or do you have it on your site?
Thank you! So clear and I loved the tip about using the emphasis to tailor the type of specific letters ...my mind is buzzing thinking what I can do.
Yay!! So glad it helped. :) Thank you for letting me know.
OMG I can't thank you enough for this! You're amazing thank you so much!!! So simple & straightforward.
Yay!! So glad you like it
THANK YOU!! theyre always changing the location of things
This was extremely helpful. Thank you!
Thanks for this! Your method seems like an easier way to add custom fonts than some of the other tutorials I've watched so far.
For the emphasis, would you do the same for the Bold typeface as well?
Yay, so glad this was helpful. The code for using bold in Squarespace CSS is "strong"
Thanks Sharon. Very helpful!
Glad it helped! :)
I can't seem to change the "Font Name" It reverts back to the original font. Thanks for your help.
Wonderful, thank you Sharon!
This was soooo extremely helpful - thank you!!
Yay, so glad it helped.
Hi Sharon, very helpful! However I realized that for the italicized font, I tried to do it like yours but it does not work on the mobile. So desktop version works perfectly but when I switched to mobile it does not applied there..
Hmmm... that is not good. Without seeing all the code in your site, it's difficult to know what's going on. Are you a member of the Squarespace circle? In there you can post your questions with a link to your url, and show the code you're using and if anything is conflicting that might cause the mobile to be off. I'm in there but there's also many Squarespace experts in there who can look into it for you. If you're not a Circle member there's also a Squarespace Community Facebook group that I am in as well if you post your question there.
Thank you! QQ - how to change title font in Testimonials? Because only in this block font didn't applying (
I would double check that the testimonial font is assigned to the same heading you have the custom font on. Go to the styles>fonts>assign fonts>List Section>Title. You can set it to whichever heading you have the custom font assigned to. That should solve it but if it's still not showing up, you might need to go a more specific route and use the selector ID to identify that title in CSS and assign it the custom font.
Hi!
This is very hlepful! Thank you! Im just wondering how to do it with the adobe fonts if you cant download them?
1. Go to fonts.adobe.com and find the font you want.
2. Click on icon. It will ask you to add it to a project -- create one for your website.
3. Adobe will give you 2 pieces of code. The first you need to put in your site's header. You can find this by going to Website > Website Tools > Code Injection
4.Go to Website > Website Tools > CSS and add second code:
@font-face {
copy / paste all the provided css font here
}
Hey question? whats the code for a updating custom font for Paragraphs 1,2, & 3?
This helped me so much thanks!
Yay, Glad it helped!
Great help, but still have a question… at Creative Market, do I have to buy 2 licenses so I can use the same font on squarespace and my desktop?
Great queestion, yes, if you want to use it on your desktop for anything I would purchase the desktop license and the web license.
@@SharonMarta One more question... I love the Editor font, but if I only use it for headings do I need all 16? Will one do? If so, which would you recommend.
@@susanhand4080 I used just 2, the regular and the italics version
Thank you so much! Very useful! I changed it but still can't change them in the template fonts. Do you have an advice? Thank you!
So glad you liked the video. My advice would be make sure everything is exactly as it should be in the code. Even the slightest error will break it. In your specific case, I would need to see your code to be able to help. Are you a Squarespace designer? If you are, the circle membership is a great place to post your code so someone can look at it for you. Or you can paste your code below and I can review it.
Hi Sharon! Thanks so much for this. Helped so much! I was able to implement the custom fonts for heading and paragraphs. However, the blocks and the font in the header are not updating for me. I've tried troubleshooting and I'm hitting a wall. Do you have any insight that might help me?
Hi Lara, can you tell me which blocks? Is it summary blocks? Lists?
@@SharonMarta Thank you so much for your reply. I meant buttons. I'm wondering if it's the monospace font?
@@LaraS-bw9px Ahhhh... I don't normally change the fonts on the buttons, just because I want to make sure those are easy to read. But you can customize buttons with different CSS code. @insidethesquare probably has a video for customizing the font in buttons with CSS code.
@@SharonMarta Thank you!
How do you change the font for BUTTONS?
Here's the code for buttons:
//Button Font//
.sqs-block-button-element {
font-family: 'font name' !important;
}
Thanks so much for this video, unfortunately, I tried to upload an adobe font, I dragged in the font from where it is on my mac, but the Squarespace fonts did not change :/ Any help with that would be appreciated.
Hi Stina, so you added the CSS code and assigned the font a name that links to the file and it's not working? What type of font is it, wof, otf, ttf?
Hello, I have seen your video, I have followed the steps, but unfortunately the change is not displayed, perhaps it is because it is not otf but ttf
It might the ttf, I've never tried using ttf on websites. Web safe fonts are woff, but I've had success with otf format as well.
do you have a code for product titles / pricing ? im having trouble finding it online
Good question. I don't currently have a code but I'll look around to see if I can find one.
Thanks for sharing, this was extremely helpful! It won’t let me copy the code in your description. Is there anyway you can post it on the comments or do you have it on your site?
Oh weird. Thanks for the heads up. Here's the blog post with the code www.sharonmarta.com/blog/how-to-up-level-your-website-design-with-custom-code
Can we use TTF version of the font in Squarespace?
I haven't tried TTF, you can try. I've used otf