Change the font of "Email" in the newsletter

Store Design
, , , ,

Topic summary

Goal: change the font of the “Email” label/placeholder in the footer newsletter form on seraneeva.com.

  • Initial advice: add CSS in base.css/theme.css/styles.css/custom.css/theme.scss.liquid targeting the input (.footer-email-input) to set font-family. This only affected the typed text after focus, not the “Email” label.

  • Clarification with a GIF: the target is the label/placeholder that moves when the field is focused.

  • New CSS proposed using relational selector :has() to style the label when the email input is focused or when it has content:
    • .input-group:has(input:focus) > label, .input-group:has(input[type=“email”]:not(:placeholder-shown)) > label { font-family: ‘Cooper BT’; }
    • Variant provided just for the not(:placeholder-shown) state.

  • Current status: the font changes to Cooper BT only on click/focus; requester asks how to keep that font consistently at all times. No final solution confirmed or marked.

  • Next step implied: target the label in all states (default, focus, and filled) rather than only focus/not(:placeholder-shown).

  • Media: screenshots/GIF used to illustrate the label behavior are central to the clarification.

Summarized with AI on December 26. AI used: gpt-5.
1

Hi guys,

Website: seraneeva.com

I’ve been stuck on this for a while. How can I change the font of the “Email” text in the newsletter in the footer?

2

Hi @flammagreg ,

which font do you want?

Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid → Insert the below code at the bottom of the file → Save

form#newsletter-footer_form .footer-email-input {
    font-family: 'your font';
}

example:

form#newsletter-footer_form .footer-email-input {
    font-family: 'Cooper BT';
}

result:

BSSCommerceB2B_0-1718734517353.png
BSSCommerceB2B_0-1718734517353.png808×168 1.91 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

3

The code changes the text after a user clicks into the newsletter, but not “Email” itself.

4

you mean this

Animation.gif

try this code

.input-group:has(input:focus) > label, .input-group:has(input[type="email"]:not(:placeholder-shown)) > label {
    font-family: 'Cooper BT';
}
5 
.input-group:has(input[type="email"]:not(:placeholder-shown)) > label {
    font-family: 'Cooper BT';
}
1 Like
6

Do you know to keep it that same font the whole time? It changes to Cooper BT when the newsletter sections clicked in