custom font not showing on mobile

[girltimebeauty]

Hello, I cant get our custom font to load on mobile

i found a discussion and followed some relevant instrcutions

i uploaded woff, woff2 and SVG and used this code:

@font-face {
font-family: 'PublicPixel';
src: url('{{ 'PublicPixel.woff2' | asset_url }}') format('woff2'),
url('{{ 'PublicPixel.woff' | asset_url }}') format('woff'),
url('{{ 'PublicPixel.svg#PublicPixel' | asset_url }}') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}

any ideas what might be wrong?

thank you

[vinh0225]

@girltimebeauty 

There may be some reasons that the custom fonts are not working on mobile; license, theme capability, file corruption, etc.

In my experience, the www.onlinewebfonts.com fonts were working on both of desktop and mobile.

If you want to import "Public Pixel" font, please check this https://www.onlinewebfonts.com/download/cacacb83f9a60def5dcb6880e1b1e78d.

If it is not what you want, you can find a similar font.
The implementation is very simple.

Hope it will help you.

[girltimebeauty]

that is the font yes! so shall i just copy that code straight in? or do i need to re upload some assets

thank you!

[vinh0225]

You can just add this line in custom.css or base.css(I don't know which file is in your theme).

@import url(https://db.onlinewebfonts.com/c/cacacb83f9a60def5dcb6880e1b1e78d?family=PublicPixel);

And you can use this like this:

font-family: PublicPixel

[vinh0225]

@girltimebeauty 

I can see this menu font on mobile now.

It looks like you implemented correctly.
Please let me know if you have any other question.

[girltimebeauty]

thats actually our old website on sqaurespace, this is the link to the one we are building and its not working 😧 https://a12e3c-6c.myshopify.com/

[girltimebeauty]

and working in dawn theme

[vinh0225 · Accepted solution]

@girltimebeauty 

I checked with Dawn theme and you can add the followings at the top of assets/base.css.

@font-face {
    font-family: "Public Pixel";
    src: url("https://db.onlinewebfonts.com/t/cff0ae88c78dc190c3d24fca496b306a.eot");
    src: url("https://db.onlinewebfonts.com/t/cff0ae88c78dc190c3d24fca496b306a.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/cff0ae88c78dc190c3d24fca496b306a.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/cff0ae88c78dc190c3d24fca496b306a.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/cff0ae88c78dc190c3d24fca496b306a.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/cff0ae88c78dc190c3d24fca496b306a.svg#Public Pixel")format("svg");
}

And please use the following to set font-family.

font-family: "Public Pixel"

Please let me know if you have any difficulty.

[vinh0225]

I tried using my test store:
https://aa8kkzneyj03wjr7-77558841652.shopifypreview.com

[girltimebeauty]

all fixed thank you for your help!

[tahliahanke]

hello, i am having an issue with this not working on mobile, fine on desktop, any ideas?

here is the code

@font-face {
font-family: "Doobie W01 Regular";
src: url("https://db.onlinewebfonts.com/t/d6ee6b0f4640ec3ff1bbc50f0149acad.eot");
src: url("https://db.onlinewebfonts.com/t/d6ee6b0f4640ec3ff1bbc50f0149acad.eot?#iefix")format("embedded-opentype"),
url("https://db.onlinewebfonts.com/t/d6ee6b0f4640ec3ff1bbc50f0149acad.woff2")format("woff2"),
url("https://db.onlinewebfonts.com/t/d6ee6b0f4640ec3ff1bbc50f0149acad.woff")format("woff"),
url("https://db.onlinewebfonts.com/t/d6ee6b0f4640ec3ff1bbc50f0149acad.ttf")format("truetype"),
url("https://db.onlinewebfonts.com/t/d6ee6b0f4640ec3ff1bbc50f0149acad.svg#Doobie W01 Regular")format("svg");
}