Cannot apply a specific font to a specific paragraph or section using CSS

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?

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.

https://caper-amethyst-h642.squarespace.com/config/pages/website-tools/custom-css

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?

It's on the "About" page.

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?

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?   

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.

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; 
}

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.

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.

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.