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

[stupidxelga]

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! 😊

[KetanKumar]

@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. 

[stupidxelga]

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

[KetanKumar]

@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
3. 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

[stupidxelga]

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!

[KetanKumar]

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

[stupidxelga]

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

[KetanKumar]

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