Font working on desktop but not phone

Solved

Font working on desktop but not phone

OOSODrinksCo
Tourist
11 0 1

On the homepage of my website (drinkooso.com) there is a section that says "OOSO is a non-alcoholic sparkling tea inspired by natural wine." another line says "★ Born in Brooklyn ★" and then finally there are icons with text next to them.

 

On desktop it appears the font is showing up correctly. On mobile the font is showing up incorrectly. Can somebody please help me figure out why and how to fix the font on mobile so it shows up properly?

 

Thanks!

Accepted Solution (1)

namphan
Shopify Partner
1505 190 212

This is an accepted solution.

Hi @OOSODrinksCo,

I checked and the font 'Unbounded' is not declared, so it won't work for both desktop and mobile on my device.

You can add the code at theme.liquid file, below <head> tag, it will work fine:

<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap" rel="stylesheet">
Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com

View solution in original post

Replies 6 (6)

Laza_Binaery
Shopify Partner
154 35 53

Hi @OOSODrinksCo 

 

I do see the same on desktop and mobile. Looks like the font did not load. Is it this fort https://fonts.google.com/specimen/Unbounded ?

It is assigned to that title but I do not see where the whole font is called/loaded.

Kind regards
Laza
www.binaery.com

namphan
Shopify Partner
1505 190 212

This is an accepted solution.

Hi @OOSODrinksCo,

I checked and the font 'Unbounded' is not declared, so it won't work for both desktop and mobile on my device.

You can add the code at theme.liquid file, below <head> tag, it will work fine:

<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap" rel="stylesheet">
Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
OOSODrinksCo
Tourist
11 0 1

Hi Namphan - anywhere below <head> or directly below in the next line? I have a number of things below <head> so not sure if placement will affect those.

namphan
Shopify Partner
1505 190 212

Hi @OOSODrinksCo,

You can add it directly below the <head> or on the 'app.css' declaration line

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
OOSODrinksCo
Tourist
11 0 1

Never mind! Looks like it worked thank you. One more question though. I have Unbounded font uplaoded to my shopify as an asset. So is there not a way to use that? Or it is better to source it from the google api so everyone's will see it that way?

namphan
Shopify Partner
1505 190 212

Hi @OOSODrinksCo,

If you want to upload it, you can upload it at content > files and declare it, it will still work fine.

When you upload it in Assets, it will not be called properly and will not work

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com