Re: Font working on desktop but not phone

OOSODrinksCo · ‎10-21-2024

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!

namphan · ‎10-21-2024

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
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

View solution in original post

Laza_Binaery · ‎10-21-2024

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 · ‎10-21-2024

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
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

OOSODrinksCo · ‎10-21-2024

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 · ‎10-21-2024

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
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

OOSODrinksCo · ‎10-21-2024

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 · ‎10-21-2024

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
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

Re: Font working on desktop but not phone

Font working on desktop but not phone

Community Blog Articles