Why isn't my custom font displaying on my online store?

[md249]

Hello,

I have uploaded a font to my shopify assets, and put in the below code to change the font for all font on my store. The font still appears to be showing a default font. However, when I use the inspect tool to inspect various elements of my site, I do see the new font name displaying - “fsrosaboldnew”. Any ideas?

//Newly installed font code start
@font-face {
font-family: “fsrosaboldnew”;
src: url(“fsrosaboldnew.woff2”) format(“woff2”),
url(“fsrosaboldnew.woff”) format(“woff”);
}
h1, h2, h3,p, body { font-family: “fsrosaboldnew”!important; }

//newly installed font code end

[GemPages]

Hello @md249

It’s GemPages support team and glad to support you today.

You can follow these steps:

1, First you go to Settings → File then upload the font you want to customize and copy the font file link just uploaded

2. Go to Online Store → Theme → Edit code → Open your theme.liquid theme file
3. Paste below code before :

Noted: Where Linkofthefontfile is the link you just uploaded in Settings → File

Let us know how it works for you.
Best regards,
GemPages Support Team

[Litos]

Hi @md249 ,

Please send your site and if your site is password protected, please send me the password. I will check it.

[md249]

Sorry, forgot to include that. My URL is https://echoessnacks.com/

[md249]

Hi, thanks for looking into this. I’ve followed the steps outlined above, and I don’t see the new font.

The file i’m using is a WOFF2, does this matter? My store URL is www.echoessnacks.com, using the Debut theme.

[Litos]

Hi @md249 ,

I checked and your site is using Recoleta font, is it the font you added?

[md249]

Hi @Litos here is the link to the page where I implemented the code that was provided by @GemPages https://echoessnacks.com/?_ab=0&_fd=0&_sc=1

[Litos]

Hi @md249 ,

Can you send me the preview link? I will check it, the current link you sent is using the publish theme

[md249]

Hi @Litos

This should be it: https://echoessnacks.com/?_ab=0&_fd=0&_sc=1

[Litos]

Hi @md249 ,

I checked and it’s using the ‘Recoleta’ font, it’s not the font you’re trying to upload? i checked and found no code about ‘fsrosaboldnew’ font.

[md249]

Hi @Litos

I think you may be looking at the published version of the site. The file I am working on is unpublished and can be found here: https://echoessnacks.com/?_ab=0&_fd=0&_sc=1

I currently have “fsrosaboldnew” loaded in, but on the front end the changes aren’t displaying.

[Litos]

Hi @md249 ,

So I asked you to send preview link, I will check it.

[md249]

Hi @Litos

Sorry about that. Here is the preview link: https://0zxvm0h3exene73o-68119757090.shopifypreview.com

[Litos]

Hi @md249 ,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

h1, h2, h3, h4.h2, p, body {
    font-family: fsrosaboldnew !important;
}

Hope it helps!

[md249]

@Litos That worked, thank you so much!

[Dermaglowlabs]

Hi there, im kinda having a similar issue. I coded the fonts in the base.css file and they show up good on chrome on my desktop but don’t show up on safari or on any browser on mobile? none of the fixes I saw in all of the discussions have helped.

im applying the custom font to the product title only. can you please take a look and see what’s wrong? im using the Origin theme version 10.0.0

thanks.

this is my code:

// newly installed font start

@font-face {
font-family: ‘Buffalo’;
font-weight: normal;
font-style: normal;
font-display: swap;
src: url(‘https://cdn.shopify.com/s/files/1/0776/4387/4610/files/Buffalo.woff2?v=1687306327’) format(‘woff2’),
url(‘https://cdn.shopify.com/s/files/1/0776/4387/4610/files/Buffalo.woff?v=1687316066’) format(‘woff’);
}

.product__title { font-family: ‘Buffalo’ !important; font-size: calc(var(–font-heading-scale) * 8rem);
}

.product__title h1 { font-family: ‘Buffalo’ !important; font-size: calc(var(–font-heading-scale) * 8rem);
}

// newly installed font end