[Rob Cargell]

For this client site, the client really likes a particular font to use for all blockquotes. I added it inline to one post using the Page Builder customizer bar that hovers over the work area; here is the inline css that was added:

So next I thought, “Hey. I want to use this font site-wide for all blockquotes.” I did not see anywhere in the customizer utility under the Appearance menu, so I thought I would just cut & paste the relevant declarations into the CSS/JS editor, adding it into the blockquote element already there. So that looked like this:
blockquote {
font-style: italic; font-family: ‘Calligraffitti’; font-weight: 400; font-size: 20px;” data-font-family=”Calligraffitti” data-font-weight=”400″ data-font-style=””
}

Sadly, this did not work, and I don’t know why. If you edit a post using the font editor, Calligraffitti is available; I have not installed Google Fonts plugin. I thought the “data-font-family” declaration was the key, my CSS editor was chock full of red letters, so something isn’t right.
The “right” post is: https://www.rachelkamps.com/2025/07/04/together-well-weather-the-storm/ ; the words to the song are in blockquote but I used the font controller to change it to Calligraffitti.
Any thoughts?

[Elana]

Hello Rob,

Thank you for reaching out to our support team.

The snippet you provided should work, but you’ll likely need to adjust it slightly. Try using the following CSS:

blockquote {
font-style: italic !important;
font-family: ‘Calligraffitti’, cursive !important;
font-weight: 400 !important;
font-size: 20px !important;
}

Keep in mind this change will only affect how blockquotes appear on the front end of your site. In the editor, they will still display using the default styling.

Also, I noticed on your site that some of the text using this font isn’t actually within blockquotes. For the above CSS to apply, make sure the text is formatted as a blockquote within the editor.

If you’d like to use the “Calligraffitti” font for other types of text, you can highlight the text in the editor. A black bar should appear at the top. Click the T or Font button and choose “Calligraffitti” from the dropdown to apply it manually.

Let me know if you need help adjusting the CSS for other elements.

Thanks,
Elana

[Rob C]

Hi Elana,
Thanks for the code 😉 ; but something weird has come of it. Now all blockquotes are affected, so there’s a success; but instead of the Calligraffitti font, they are all Comic Sans (at least, that’s what it looks like to me). Just for fun, I also re-inserted the “data” declarations, which did not have any affect that I can see. The only thing that appears to have corrected was the word “Calligraffitti” in the editor, in the data-font-family declaration, has changed from a brown-ish tone, to black, which it what I think I want? all the declarations are still red 🙁 Oh, and a funny thing; where the family-font declaration is, the word Calligraffitti is book-ended with single quotes; but in the data-font-family declaration, the Calligraffitti call required I remove those single quotes to become black; otherwise, with the quotes, it was that brownish color. I don’t even know what that might tell an expert coder, but I feel like it does mean something.
Anyway, if you feel up to it, and would like to have a look inside the admin console, let me know, I’d be grateful to provide the login credentials to you.
Thanks again!
Rob C

[Elana]

Hello Rob,

Thank you for reaching out to our support team.

Sorry about that. It looks like the issue may have happened when I copied it over. To fix it, please remove the comma and replace with a semicolon that line with the following:

font-family: ‘Calligraffitti’;
cursive !important;

Let me know if that works or if you run into anything else.

Thanks,
Elana

[Author]

Posts