Custom Font Not Applying to Login Form in Shopify Savor Theme

Store Design
, , , ,
1

Hello everyone!

I’m using the Shopify Savor theme and I’ve added a custom font to my website through coding. However, the font in the login form (account login page) is not changing and still shows the default font.

I would like the login form font to match the custom font used on the rest of my website. Could anyone please help me fix this issue? Give me full update code. Thanks in advance!

Store: https://svelteclothes.myshopify.com/

Password: Admin

I’m using the following code:

@font-face {
font-family: “Stereohead”;
src: url(“https://cdn.shopify.com/s/files/1/0717/6831/0072/files/Stereohead.woff2?v=1777386173”) format(“woff2”);
font-weight: normal;
font-style: normal;
font-display: swap;
}

/* THE ULTIMATE UNIVERSAL FONT OVERRIDE
Targeting: Body, Headings, Form elements, Tables, and Shopify Custom Components
*/
,
body, p, a, li, span,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
input, select, textarea, option, button, .button,
.product-badges__badge,
summary,
.details__header,
.email-signup__heading,
.email-signup__input,
.price,
.rte p,
.facet-filters__sort,
.product-count__text,
/ Cart Specific Elements */
text-component,
dt, dd,
.cart-items__variant,
.cart-totals__total-value,
.cart-totals__tax-note,
.cart-totals__tax-note small,
.cart-items__details,
.cart-primary-typography,
.cart-secondary-typography {
font-family: “Stereohead”, sans-serif !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* Force Table and List alignment for variants */
.cart-items__variants dt,
.cart-items__variants dd {
font-family: “Stereohead”, sans-serif !important;
font-style: normal !important;
}

/* Ensure the total and subtext in cart are covered */
.cart-totals__total-value,
.cart-totals__tax-note small {
font-family: “Stereohead”, sans-serif !important;
}

Screenshot 2026-04-29 164255
Screenshot 2026-04-29 164255573×571 16.7 KB

2

Hey @dreamtechzone_5

Heads up, you can’t fix this with theme CSS. Shopify moved customer accounts (login, register, account dashboard, order history) to “New Customer Accounts” a while back, and those pages are hosted on shopify.com, not your theme. They render in an iframe or on a separate Shopify domain, so your theme’s CSS literally never loads there. That’s why your @font-face and overrides aren’t applying, the page isn’t part of your theme at all.

So the code isn’t broken, you’re just trying to style a page that lives outside your theme. If matching the brand font there is critical, classic accounts is the only practical route.

Best,
Moeed

3

Thank you very much for your reply. Can’t this be fixed through coding?

4

The only real options are these.

  1. One, in admin go to Settings > Customer accounts and switch from “New customer accounts” to “Classic customer accounts”. Classic accounts do live inside your theme and your CSS will apply. Downside: you lose the newer account features.

  2. Two, stick with new customer accounts and accept the default font, since branding control there is limited to colors, logo, and a few basic settings under Settings > Customer accounts > Edit style.

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

5

it is not working because of wrongly used of syntaxt, try using the straight quotes.

copy paste this code and give it a try

@font-face {
font-family: “Stereohead”;
src: url(“https://cdn.shopify.com/s/files/1/0717/6831/0072/files/Stereohead.woff2?v=1777386173”) format(“woff2”);
font-weight: normal;
font-style: normal;
font-display: swap;
}

/* THE ULTIMATE UNIVERSAL FONT OVERRIDE
Targeting: Body, Headings, Form elements, Tables, and Shopify Custom Components
*/

body,
p,
a,
li,
span,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
input,
select,
textarea,
option,
button,
.button,
.product-badges__badge,
summary,
.details__header,
.email-signup__heading,
.email-signup__input,
.price,
.rte p,
.facet-filters__sort,
.product-count__text,

/* Cart Specific Elements */
text-component,
dt,
dd,
.cart-items__variant,
.cart-totals__total-value,
.cart-totals__tax-note,
.cart-totals__tax-note small,
.cart-items__details,
.cart-primary-typography,
.cart-secondary-typography {
font-family: “Stereohead”, sans-serif !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* Force Table and List alignment for variants */
.cart-items__variants dt,
.cart-items__variants dd {
font-family: “Stereohead”, sans-serif !important;
font-style: normal !important;
}

/* Ensure the total and subtext in cart are covered */
.cart-totals__total-value,
.cart-totals__tax-note small {
font-family: “Stereohead”, sans-serif !important;
}
6

No, it’s not the quotes – the initial code was mangled by copy-pasting without using the </> button.

Half-fix is to use CSS variables instead of this correndous font-family override.
If you simply used this rule:

body {
  --font-heading--family: Stereohead,sans-serif;
  --font-body--family: Stereohead,sans-serif;
}

You’d have this, which is already much better.

Screenshot 2026-04-30 at 7.32.32 PM
Screenshot 2026-04-30 at 7.32.32 PM751×506 66.3 KB

Override fonts on “login with shop” vidget may be not possible, as it’s Shopify-branded.

7

This code is not working.

8

Where do I paste the code?

9

Theme Settings-> Custom CSS would be my preferred location.

Bottom of the assets/base.css (instead of the "* THE ULTIMATE UNIVERSAL FONT OVERRIDE " stuff) is acceptable too.

10

Please give me full update code. Thank you.

11

I’d start with

@font-face {
  font-family: “Stereohead”;
  src: url(“https://cdn.shopify.com/s/files/1/0717/6831/0072/files/Stereohead.woff2?v=1777386173”) format(“woff2”);
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
body {
  --font-heading--family: Stereohead,sans-serif;
  --font-body--family: Stereohead,sans-serif;
}

Instead of what you have now added at the bottom of the assets/base.css