Custom font not working on mobile - Dawn theme

[aliceweegee]

I’ve attempted the solutions shared on other posts but still having no luck.
My custom font shows correctly on desktop but doesn’t on smaller devices.
My store URL is https://sidelines.store/ and I’d really appreciate any help to resolve this!

[AlexTang]

Cụ thể là anh bị lỗi chỗ nào

[DaisyVo]

Hi @aliceweegee

I hope you’re doing well!

Could you please provide more details about the text that isn’t displaying correctly on smaller devices? A screenshot would help a lot. I’d like to test it from my end to help resolve the issue.

Best regards,

Daisy

[namphan]

Hi @aliceweegee ,

Please describe more about the font position causing the error, I will check it for you

[aliceweegee]

Thanks so much Daisy. Here’s the screenshot of desktop (font displaying correctly) and mobile (font displaying incorrectly).
It looks like the character spacing goes pretty big or something…

[DaisyVo]

Hi @aliceweegee

If I understand correctly, you want the text on mobile to appear exactly the same as it does on desktop.

To complete your request, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS.

• Screenshot for reference

2. Paste the provided code into the Custom CSS section.

@media (max-width: 480px) {
    body #shopify-section-template--23843561799946__rich_text_mctGBT h2 {
        font-size: 200%;
    }
}
@media (max-width: 480px) {
    body .section-template--23843561799946__rich_text_tTwnyj-padding h2.rich-text__heading {
        font-size: 124% !important;
    }
}

Hope this helps,

Daisy

[aliceweegee]

Thank you for the great instructions.
I have tried that but I get the error “Online Store Editor can’t be published” when the code is in the customcss input box (see screenshot).
Any idea why this would be?

[DaisyVo]

Hi @aliceweegee

Could you please try again with this code

@media screen and (max-width: 480px) {
    body #shopify-section-template--23843561799946__rich_text_mctGBT h2 {
        font-size: 200%;
    }
}
@media screen and (max-width: 480px) {
    body .section-template--23843561799946__rich_text_tTwnyj-padding h2.rich-text__heading {
        font-size: 124% !important;
    }
}

Thank you so much. Let me know if it works

Best,

Daisy

[aliceweegee]

No unfortunately I get the same error

[DaisyVo]

Hi @aliceweegee

Could you try to add code into the Edit theme code instead

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above

Best,

Daisy

[aliceweegee]

I was able to save that but it doesn’t have seem to fixed the problem.
It seems the issue is that the character spacing is messed up on mobile but I can’t find the line of code that would be altering it

[aliceweegee]

Hi Namphan, thanks for reaching out.

For some reason, my custom font is displaying incorrectly on mobile. It looks like character spacing is increased but I can’t locate the issue in the code.

Here is a screenshot of both desktop (desired font display) and mobile view.

My site can be found at sidelines.store.

What other information is useful to give you? Thanks again.

[namphan]

Hi @aliceweegee ,

I checked and the text ‘Merch as good as the game.’ shows up the same for both desktop and mobile, can you double check it?

[aliceweegee]

It does show up correctly when I inspect in Chrome but on my device, it doesn’t show up correctly