Fixed letter spacing issue with Spotlight Theme

Store Design
, ,

Topic summary

Issue: Spotlight theme applies a default letter-spacing value (0.6) to headings, which looks poor on some fonts. Overriding via custom CSS sets letter-spacing to normal but causes a visible “jump” on page load as text shifts from wide to normal.

Proposed fixes:

  • Insert the override CSS directly before in theme.liquid so it loads early and prevents the initial widening.
  • Add the same CSS rule in Assets > base.css (core stylesheet) to ensure it’s applied immediately:
    h1,h2,h3,h4,h5,.h0,.h1,.h2,.h3,.h4,.h5 { font-kerning: normal !important; letter-spacing: normal !important; }

Context: Moving the rule into earlier-loading theme files aims to eliminate the page-load text “animation” (initial layout shift).

Open questions: The requester is concerned that editing theme files (theme.liquid/base.css) may be overwritten by future Spotlight theme updates (currently v11.0.0). No confirmation yet on how updates handle these custom edits. The thread remains unresolved regarding update-safety and best long-term approach.

Summarized with AI on January 15. AI used: gpt-5.
1

When using the Spotlight theme, the typography styling seems to be adding a default letter-spacing CSS of 0.6 across the board. This looks poorly on many fonts.

So we have added this rule to custom CSS:

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-kerning: normal !important;
  letter-spacing: normal !important;
}

Unfortunately the result is that each time a page is loaded the headings are first displayed wider and then jump to the correct “normal” setting defined in the rule above. This plays out as an ugly text “animation” we would love to get rid of.

Any ideas what we can do? Ideally, the letter spacing would be an option you’d turn off in the typography settings of the theme.

2

Hey @KaiV

Add this code above in your theme.liquid file then it shouldn’t happen

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Hi @KaiV

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

h1,h2,h3,h4,h5,.h0,.h1,.h2,.h3,.h4,.h5 {
  font-kerning: normal !important;
  letter-spacing: normal !important;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly

1 Like
4

Thank you that makes sense. @Moeed @PageFly-Richard

I was hesitating editing the actual code as I didn’t want to mess with future developer updates to the theme. Is there any information on how this is handled? Will their updated CSS overwrite our edits? Spotlight is at 11.0.0 at the moment. What happens when the theme is updated to a newer version?