Font appearing wrong on Desktop Chrome but correct on Mobile Chrome

Solved

Font appearing wrong on Desktop Chrome but correct on Mobile Chrome

fotobydan
Tourist
14 0 3

Hi everyone,

 

First post here, and I am hoping someone can help.

I have a Shopify store that is displaying the correct font on my Chrome browser on my phone, but on my desktop computer at work, it is displaying what looks like a default font, which looks awful.

Please see the attached images.

Is there a solution for this?

Thanks

Dan

 

MobileMobileDesktopDesktop

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12321 2551 3715

This is an accepted solution.

@fotobydan 

Please add the following code at the bottom of your assets/theme.css file.

.nav-bar__link {
    font-family: Source Sans Pro !important;
}

body {
    margin: 0;
    font-family: Source Sans Pro !important;
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 8 (8)

dmwwebartisan
Shopify Partner
12321 2551 3715

@fotobydan 

Please share store URL.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
fotobydan
Tourist
14 0 3
dmwwebartisan
Shopify Partner
12321 2551 3715

@fotobydan 

Please share font name 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
fotobydan
Tourist
14 0 3

Its Source Sans Pro

dmwwebartisan
Shopify Partner
12321 2551 3715

@fotobydan 

Please add the following code at the bottom of your assets/theme.css file.

.heading {font-family: Source Sans Pro !important;}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
fotobydan
Tourist
14 0 3

Thank you for that!

It has changed the fonts of the headers, which is great.

How can change the font of the main navigation, and also the body text?

Thanks

 

dmwwebartisan
Shopify Partner
12321 2551 3715

This is an accepted solution.

@fotobydan 

Please add the following code at the bottom of your assets/theme.css file.

.nav-bar__link {
    font-family: Source Sans Pro !important;
}

body {
    margin: 0;
    font-family: Source Sans Pro !important;
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
fotobydan
Tourist
14 0 3

Thank you!!!!

You've really helped me out. 🙂