Add Accent Font to Headlines in Squarespace

Squarespace Font Manipulation

This code snippet gives you selective font control inside your headings.

Easily highlight specific words in your headings with a custom accent font.

Start by assigning your desired font to the “Miscellaneous” font setting. Then apply the code snippet. To activate the effect, simply italicize the word within your heading—the styled font will automatically replace it, giving you a subtle but powerful design detail without extra code or plugins.

h1 em, h2 em, h3 em { font-family:var( --meta-font-font-family); font-style:normal !important;}

Here’s what actually happens when you implement it:

• Any text inside <em> (italicized text) within your H1, H2, or H3 headings will switch to your accent font

• The italics styling itself is removed (font-style: normal), so you’re only using italics as a trigger, not a visual style

• The rest of the heading stays in your primary font, creating a clean contrast

In practice:
You can make one word in a headline stand out in a completely different font—think elegant, bold, or script—while keeping everything else consistent.