How to Apply a Custom Font to Login, Account, and Orders Pages in Spotlight Theme?

Store Design

Topic summary

Goal: apply a custom font (Silkscreen) across Shopify’s Spotlight theme, specifically on Login, Account, and Orders pages.

Steps tried:

  • Added @font-face and global CSS (body, headings, links) with !important; font applies to most pages but not the targeted customer pages.
  • Attempted JavaScript (e.g., setting .login-card font-family) with no effect.
  • Shared store URL and password for review.

Guidance given:

  • Upload font files to Assets and define @font-face in base.css (example provided with Montserrat).
  • OP uploaded Silkscreen Regular/Bold (EOT, TTF, WOFF, WOFF2) and added two @font-face blocks.

Current issue:

  • Font still does not apply on Orders/Profile pages; OP suspects those pages are rendered differently or have overriding styles. JavaScript overrides did not work.

Outcome and next steps:

  • No confirmed solution in-thread; helper asked for staff access to implement changes, which was declined.
  • Customization via DM was offered.

Notes:

  • Code snippets (CSS @font-face and selectors) are central to understanding the approach.
  • Unanswered: where to modify CSS/HTML for Spotlight’s customer pages to ensure the custom font is applied.
Summarized with AI on December 13. AI used: gpt-5.
1

Hi Shopify Community,

I’m using the Spotlight theme, and I’d like to apply my custom font (Silkscreen) to the Login, Account, and Orders pages. I’ve uploaded the font to the Files section in my Shopify admin, and I’ve tried adding the following code to my CSS:

@font-face { font-family: ‘Silkscreen’; src: url(‘{{ “Silkscreen-Regular.woff2” | asset_url }}’) format(‘woff2’), url(‘{{ “Silkscreen-Regular.woff” | asset_url }}’) format(‘woff’); font-weight: normal; font-style: normal; } body, h1, h2, h3, p, a { font-family: ‘Silkscreen’, sans-serif !important; }

This works for most parts of my store, but it doesn’t affect the Login, Account, and Orders pages. I believe these pages might be controlled differently or use some embedded code that overrides the custom CSS.

I’ve also tried JavaScript to dynamically apply the font to specific elements like this:

document.querySelector(‘.login-card’).style.setProperty(‘font-family’, ‘Silkscreen’, ‘important’);

But this doesn’t seem to work either.

Could someone guide me on how to:

  1. Apply my custom font to these pages?
  2. Locate and modify the CSS/HTML structure for these pages in the Spotlight theme?

Any insights or recommendations would be greatly appreciated!

Thank you! :blush:

1 Like
2

@stupidxelga
Sorry you are facing this issue,
It would be my pleasure to help you.
Please share your site URL,
I will check out the issue and provide you what is best way to solution and guide.

3

Thank you for your reply!
Here it is: https://05ec2c-89.myshopify.com/
password: chuska

1 Like
4

@stupidxelga thanks for all details can you please try code this way this is work my demo store

Yes, you can do easy to upload your custom font

  1. Go to Online Store->Theme->Edit code
    2.Asset->/base.css->upload your custom font all font tyep = TTF, OTF, WOFF, WOFF2, SVG
  2. Asset->/base.css->paste below code at the bottom of the file.
@font-face {
font-family: 'Montserrat-Regular';
src: url('{{ 'Montserrat-Regular.eot?' | asset_url }}');
src: url('{{ 'Montserrat-Regular.eot??#iefix' | asset_url }}') format('embedded-opentype'),
url('{{ 'Montserrat-Regular.woff' | asset_url }}') format('woff'),
url('{{ 'Montserrat-Regular.ttf' | asset_url }}') format('truetype'),
url('{{ 'Montserrat-Regular.svg#Montserrat-Regular' | asset_url }}') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}

can you please just change font name, for example, Montserrat-Regular to your custom font name

5

Hi there,
Thank you for helping me!

I’ve followed your instructions to upload my custom font files, but I’m still having trouble applying the font to the orders and profile pages. Here’s what I’ve done so far:

  1. I uploaded the following files to the Assets section of my theme: (It’s all i found)

    • Silkscreen-Regular.eot
    • Silkscreen-Regular.ttf
    • Silkscreen-Regular.woff
    • Silkscreen-Regular.woff2
    • Silkscreen-Bold.eot
    • Silkscreen-Bold.ttf
    • Silkscreen-Bold.woff
    • Silkscreen-Bold.woff2

  2. I added the following @font-face declaration to the bottom of my CSS file:

css

Копировать код

@font-face { font-family: ‘Silkscreen-Regular’; src: url(‘{{ ‘Silkscreen-Regular.eot?’ | asset_url }}’); src: url(‘{{ ‘Silkscreen-Regular.eot??#iefix’ | asset_url }}’) format(‘embedded-opentype’), url(‘{{ ‘Silkscreen-Regular.woff2’ | asset_url }}’) format(‘woff2’), url(‘{{ ‘Silkscreen-Regular.woff’ | asset_url }}’) format(‘woff’), url(‘{{ ‘Silkscreen-Regular.ttf’ | asset_url }}’) format(‘truetype’); font-weight: normal; font-style: normal; } @font-face { font-family: ‘Silkscreen-Bold’; src: url(‘{{ ‘Silkscreen-Bold.eot?’ | asset_url }}’); src: url(‘{{ ‘Silkscreen-Bold.eot??#iefix’ | asset_url }}’) format(‘embedded-opentype’), url(‘{{ ‘Silkscreen-Bold.woff2’ | asset_url }}’) format(‘woff2’), url(‘{{ ‘Silkscreen-Bold.woff’ | asset_url }}’) format(‘woff’), url(‘{{ ‘Silkscreen-Bold.ttf’ | asset_url }}’) format(‘truetype’); font-weight: bold; font-style: normal; }

I suspect the issue may be due to Shopify rendering these pages through external services, or there might be some overriding styles. I’ve also tried adding JavaScript to force the font on those pages, but the issue persists.

Could you please advise what I might be missing or if there’s another approach to applying my custom font to these specific pages?

Thanks in advance for your help!

1 Like
6

@stupidxelga oh sorry if still issue this if possible to add me staff account so i can easy to manage code and update

7

Hi, sorry, unfortunately can’t do that
But thank you for your help!

8

@stupidxelga ok thanks for update if you want customization code please DM Details