KarrieR Posted May 15 Share Posted May 15 I feel like I've tried everything I can think of to get my font to change, but it's not working. Specifically, I initially tried to change all Paragraph 2s to the font 'Caveat'; however, when that didn't work, I tried changing a specific section of my code to the new font. This font exists within Squarespace, so I'm not sure why it isn't working; however, because it's not working, I installed it as a custom font, to see if that would resolve the issue, but it's still not working. My code is listed below: @font-face { font-family: 'Caveat'; src: url(https://static1.squarespace.com/static/65d7ec114e68913073bb3de2/t/6644cef58fe34e63d033e45e/1715785461708/Caveat-VariableFont_wght.ttf); } #block-yui_3_17_2_1_1715742598093_7611 { font-family: 'Caveat' !important; } Interestingly, if I replace 'Caveat' with another font that I installed 'Smooth Fantasy', it works. However, no other font that I've installed or that is native to Squarespace is working with this code. Thoughts? Link to comment
JayVanDyke Posted May 15 Share Posted May 15 can you share the link to your site? You. most likely need to target inside that block id to the actual text element h1, h2, h3, h4, p, .somethingElse etc. ☕ Did I help you? Buy me a coffee! 👨💻 Bergen Design Co. 💻 I'm for hire on Upwork! 🕸️ Squarespace Experts 🖥️ 99Designs Link to comment
KarrieR Posted May 15 Author Share Posted May 15 https://caper-amethyst-h642.squarespace.com/config/pages/website-tools/custom-css Link to comment
JayVanDyke Posted May 15 Share Posted May 15 This is your internal link, we only need up to the first / unless youre trying to get me to a specific page. Where in your site is this block that you're targeting? Is it on the home page? ☕ Did I help you? Buy me a coffee! 👨💻 Bergen Design Co. 💻 I'm for hire on Upwork! 🕸️ Squarespace Experts 🖥️ 99Designs Link to comment
JayVanDyke Posted May 15 Share Posted May 15 Its just not finding your font file. Maybe try reuploading it and relinking in your css? Are you only using one of the weights for it? Maybe there's an issue with the variable font file? ☕ Did I help you? Buy me a coffee! 👨💻 Bergen Design Co. 💻 I'm for hire on Upwork! 🕸️ Squarespace Experts 🖥️ 99Designs Link to comment
KarrieR Posted May 15 Author Share Posted May 15 (edited) I should just be able to drag and drop, correct? I tried again with the semi-bold version, and it didn't work either. Actually, the only reason all versions of this font are installed is because when one didn't work, I tried installing another. This font is showing up in my drop-down list in Word, so I assume that means these files are OK? Are none of them showing up on your end? Related, since this font is native to Squarespace, shouldn't I be able to remove the first section of the code (@face-font) and have the code still work? Edited May 15 by KarrieR Link to comment
Solution KarrieR Posted May 15 Author Solution Share Posted May 15 OK, I figured it out. The file wasn't loading when I dragged and dropped it into Squarespace, but when I navigated to it directly, it was able to load it. I also needed to extract it from the zipped file before Squarespace could find it (even though I was able to see the font in my folder structure and install it on my computer without unzipping it). Link to comment
KarrieR Posted May 15 Author Share Posted May 15 However, I'm still not sure why I can't use any of the fonts that are native to Squarespace. Let me know if you have any thoughts on that. Link to comment
KarrieR Posted May 15 Author Share Posted May 15 Solve one problem, find another. So, I was able to get the font to update in this section, and I could change the font size, but the color is not updating. It looks like my code is right? @font-face { font-family: 'Caveat'; src: url(https://static1.squarespace.com/static/65d7ec114e68913073bb3de2/t/6644fc016beeaf1f4521b372/1715796993537/Caveat-SemiBold.ttf); } #block-yui_3_17_2_1_1715742598093_7611 { font-family: 'Caveat' !important; font-size: 30px; color: #0097b2; } Link to comment
KarrieR Posted May 15 Author Share Posted May 15 OK, I figured that out too. If I remove the code for the color in CSS, I can edit the color of this section normally within Squarespace. Although, I'm not sure why the code above didn't work. Link to comment
JayVanDyke Posted May 16 Share Posted May 16 21 hours ago, KarrieR said: However, I'm still not sure why I can't use any of the fonts that are native to Squarespace. Let me know if you have any thoughts on that. Do you mean that you want to load up a font that isn't currently set in site styles and assigned to your site anywhere? Squarespace does not seem to load fonts that you're not actively using. In the past what I've done as a workaround is to temporarily set that font and then use the inspector to find where SS is importing or loading it from. KarrieR 1 ☕ Did I help you? Buy me a coffee! 👨💻 Bergen Design Co. 💻 I'm for hire on Upwork! 🕸️ Squarespace Experts 🖥️ 99Designs Link to comment
JayVanDyke Posted May 16 Share Posted May 16 20 hours ago, KarrieR said: Solve one problem, find another. So, I was able to get the font to update in this section, and I could change the font size, but the color is not updating. It looks like my code is right? @font-face { font-family: 'Caveat'; src: url(https://static1.squarespace.com/static/65d7ec114e68913073bb3de2/t/6644fc016beeaf1f4521b372/1715796993537/Caveat-SemiBold.ttf); } #block-yui_3_17_2_1_1715742598093_7611 { font-family: 'Caveat' !important; font-size: 30px; color: #0097b2; } Same comment as before on specificity. You're not specific enough in this code, some things may cascade down to the element you're trying to affect but essentially what you're saying in this code is that the container that is holding the text element needs to have that font, font size, and color not necessarily the text element itself. That may trickle down to the element if it doesn't have anything set or if your set of selectors is more specific than the ones Squarespace is using. If its a paragraph element you need a p after the 7611 or if its some other type of block with a different selector you'll need that to get it to work. Sometimes this still isnt enough and if you've used the color picker inside the text block you'll need to add a "p span" into there but at that point you might as well set the color inside the text editor instead of with code. ☕ Did I help you? Buy me a coffee! 👨💻 Bergen Design Co. 💻 I'm for hire on Upwork! 🕸️ Squarespace Experts 🖥️ 99Designs 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