uploading custom font to assets folder not working

[ameisels29]

I have uploaded custom fonts to several projects before, but now when I try to do the same on a new project, there are several issues:

1. I am unable to upload the .ttf version of the font 

 

2. The .woff and .woff2 versions of the font are being corrupted when uploading to the assets folder, I am seeing these warnings in the console.

It seems like there is an issue with the new code editor, specifically when trying to upload fonts. If I host the same exact fonts externally it works fine, but it loads in too slow on page load and you can see the font change. 

Is there a way to force the old code editor?

[ameisels29]

I was able to get it working by uploading the same exact fonts to the "Files" section in the settings instead, and then changing the src values in the CSS file to match.  If that's how it needs to work now, then it should be changed in the guide on https://shopify.dev/themes/architecture/settings/fonts#host-fonts-in-your-theme

Not sure why the assets folder method isn't working any more, it worked in my previous projects. I assume it has something to do with the new code editor update and the way it uploads the assets. I found a stackoverflow thread (https://stackoverflow.com/questions/30442319/failed-to-decode-downloaded-font) that said the font files need to be uploaded as Binary and not ASCII, but that is just a shot in the dark.

[GEKKOMultimedia]

LIFE SAVER! Someone @ Shopify care to comment on this? It's been like this for years to use the assets folder.

[peterzhong]

I have the same problem.

[Bexy]

I'm having this exact same issue. I've even tried to upload the .ttf and .otf to the files folder and replace the url in the css but to no avail 😞

Custom font works perfect on desktop but doesnt show correctly on iphone/safari which im assuming is down to the ttf/otf?

What did you put in the css to point to the files url? Just incase I'm missing something!

Any help is appreciated! 

[Bexy]

This is what i have entered in both the theme.css and theme.scss.liquid files:

@font-face {
font-family: 'Have Heart Two';
      src: url({{ "HHTwo.woff" | asset_url }}) format("woff"),
           url({{ "HHTwo.woff2" | asset_url }}) format("woff2"),
           url({{ "HHTwo.eot" | asset_url }}) format("embedded-opentype"),
           url({{ "HHTwo.svg" | asset_url }}) format("svg"),
           url({{ "https://cdn.shopify.com/s/files/1/0399/0985/1296/files/HHTwo.ttf" | asset_url }}) format("truetype"),
           url({{ "https://cdn.shopify.com/s/files/1/0399/0985/1296/files/HHTwo.otf" | asset_url }}) format("opentype");
}

[GEKKOMultimedia]

Hey Bexy,

I got it working just using woff and woff2:

@font-face {
font-family: 'webfont';
src: url('https://cdn.shopify.com/s/files/1/2035/3389/files/webfont.woff2?v=1658995846') format('woff2'),
url('https://cdn.shopify.com/s/files/1/2035/3389/files/webfont.woff?v=1658995833') format('woff');
font-weight: normal;
font-style: normal;
}

h1 {
font-family: 'webfont'!important;
}

Tested and working on iPhone and all other platforms.

Jan

(URLs are not real, just an example).

[Bexy]

You absolute legend!

Just for future reference if anyone else has this issue, you MUST upload the .woff and .woff2 to you files via the settings. Uploading them to the assets folder is not enough even though they upload correctly and this then works on desktop, it wont work across mobile/safari!

[Jaime_de_Helium]

Hi:
the .ttf and .otf to the files do not compatibles to iOS or some browsers, I recommend to you convert that files to WOFF and WOFF2.

[marcoswata]

Thanks for letting us know how it worked for you. I spent so much time trying to get this working and you saved me!!! I hope someone from Shopify can see this and investigate..

[EPIQ]

Total life saver! thank you so much, I've been on this issue for hours: and your solution did the trick:

Uploading the font to settings (bottom left of main admin page)/Files

Copying the uploaded file's url

Pasting the complete url in the CSS code that goes at the bottom of the "base.css" file:

@font-face {
font-family: "FONT NAME";
src: url("FULL FONT FILE URL") format("woff2"),
url("FULL FONT FILE URL") format("woff2");
}

h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, body, p, link, h6 a, #nav li a, div.title a, .headline, .subtitle {
font-family: "FONT NAME" !important; }

*I used a woff2 file, so if you copy this code, remember to replace woff2 by whichever format you use 

[Shaibt]

Definitely a change in the theme/code editor.

We have custom fonts loaded ~18m ago that are fine (using old code editor) and then new fonts we try to upload are corrupted. The custom fonts guide you pointed to in the Shopify docs is broken.

[upupcreative]

I am so glad I found this thread because I spent HOURS on this yesterday and was so frustrated. As recently as June, I was able to upload custom fonts via "add asset" (and those fonts that I did in June still function fine), but now when I upload there, they don't work.

Uploading via Settings > Files solved the problem.

I wanted to add, though, that I did not get any file corruption or errors or any warnings at all. The files uploaded as new assets, but when I added font-face rules in my css file, they weren't working on the site at all and instead those sections of the site were defaulting to Times.

Very frustrating.

[TAMARA_JOHNSON1]

@ameisels29 @upupcreative @Shaibt @EPIQ @Jaime_de_Helium and anyone else with insight:

My dev team is having issues and hoping for insight into what you have mentioned. They can't seem to get the fonts to work: We are using the Impact theme (UPDATED VERSION) https://impact-theme-shape.myshopify.com/en-us.

We encountered an issue while trying to upload custom fonts to the theme. Despite uploading the fonts successfully, the changes do not appear to be reflected on the front end of our website.

Hoping someone can assist us! TIA!

[marcoswata]

@TAMARA_JOHNSON1 do you mean even uploading via Settings > Files doesn't solve the problem for your team?
That's what I've been doing in all different themes I work on.

[TAMARA_JOHNSON1]

@marcoswata I sent them this link, and they said they tried everything. It's only the 3 custom fonts I want added. They mentioned that other fonts are working correctly. So bizarre and this is delaying our launch date ;/

[marcoswata]

@TAMARA_JOHNSON1 
The screenshots didn't load for me the first time. Now I can see they are still using the filter "asset_url".
They need to upload the files in the Settings, grab the links and actually hardcode them in the font-face.
So the font-face should look like this in the actual code:

src: url(https://cdn.shopify.com/s/files/1/0052/9753/2123/files/mywebfont.woff?v=12321323) format('woff')

And not:

src: url( {{'mywebfont.woff' | asset_url}}) format('woff')

[TAMARA_JOHNSON1]

@marcoswata you're awesome! I am going to let them know now.... 

[TAMARA_JOHNSON1]

@marcoswata @Such a bummer they said that did resolve 😞. I can’t imagine what the issue would be.  Attaching screenshots for reference. 

 

 

[Jaime_de_Helium]

Hello!
Can you send me your fonts to try in my store?

[marcoswata]

@TAMARA_JOHNSON1 what do they see in the network tab of the browser when it tries loading the ttf font?

If you can send us the preview link with a password we can try helping further. 

[TAMARA_JOHNSON1]

@marcoswata Okay, thanks. I just reached out to them to get these details. Really appreciate you!

[marcoswata]

@TAMARA_JOHNSON1 Have you ever solved this?

[BenjaminG]

Same issue. I used the Files section too has indicated in the documentation and it works.

@font-face {
  font-family: "Font name";
  src: url("{{ '[font-file-name]' | file_url }}") format("[font-format]");
}

https://shopify.dev/docs/storefronts/themes/architecture/settings/fonts#custom-fonts

Weird issue. Should work with the assets folder naturally. The downside of using the Files section it that the files can be deleted easily...

Wait & See!