Mobile view not showing as it does on the desktop view.

theylolabel
Excursionist
14 0 7

Hello, the mobile view on my screen shows up fine with the correct fonts, but when I load the website on my actual phone, the fonts change to different ones that I have no chosen. How can I change that?

KetanKumar
Shopify Partner
15838 1758 5836

@theylolabel 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
theylolabel
Excursionist
14 0 7
KetanKumar
Shopify Partner
15838 1758 5836

@theylolabel 

Thanks for your store url 

can you please show me what's an issue if possible to provide screenshot?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
theylolabel
Excursionist
14 0 7
The website on mobile view is showing up fine when I view it on the desktop (see photo 1 & 2)

But when I view the website through the url on my actual phone, the font changes (see photo 3 & 4)

Why is the font changing on the headings from impact to something else?
[cid:1978982C-6E74-4001-A4F6-BB158387BB74-L0-001][cid:E2D50101-C211-4294-9356-1FFFAD4B9761-L0-001][cid:EAB68611-8B69-4A1F-B089-9CCED0746DF8-L0-001][cid:7D2A00B2-F982-49F5-B185-0D1F7D2B580D-L0-001]
0 Likes
theylolabel
Excursionist
14 0 7

The website on mobile view is showing up fine when I view it on the desktop (see photo 1 & 2)

 

But when I view the website through the url on my actual phone, the font changes (see photo 3 & 4)

 

Why is the font changing on the headings from impact to something else?

FDAB6C3C-FDD9-458E-BE3E-67C6B3965D30.png

7FE7F982-DA71-40B8-B22D-A5E4763C7635.png

603F2703-4BAA-4C81-9129-FC1704E21BB5.jpeg

A855E6AF-0AD5-42E9-AF96-8538BBE47008.jpeg

0 Likes
KetanKumar
Shopify Partner
15838 1758 5836

@theylolabel 

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
theylolabel
Excursionist
14 0 7

On my iPhone using safari. I have also checked on multiple other iPhones and the font changes when you view on the mobile. 

KetanKumar
Shopify Partner
15838 1758 5836

@theylolabel 

Thanks for it 

make sure your font type added to your assets folder check below all details 

Yes, you can do easy to upload your custom font

1. Go to Online Store->Theme->Edit code
2.Asset->/theme.scss.liquid->upload your custom font all font tyep = TTF, OTF, WOFF, WOFF2, SVG
3. Asset->/theme.scss.liquid->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 the font name, for example, Montserrat-Regular to your custom font name

Important: This all file is mandatory to show all device : TTF, OTF, WOFF, WOFF2, SVG

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
theylolabel
Excursionist
14 0 7

I pasted your code and the website on my mobile is still not showing up the same as it does on a desktop. Please see what else I should do.

0 Likes