uploading custom font to assets folder not working

ameisels29
Shopify Partner
3 0 17

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 

Screenshot 2022-07-22 103646.png

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.

Screenshot 2022-07-22 102407.png

 

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?

Replies 22 (22)

ameisels29
Shopify Partner
3 0 17

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

ameisels29_0-1658534580779.png

 

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
Shopify Partner
2 0 4

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

peterzhong
Shopify Partner
3 0 1

I have the same problem.

Bexy
Tourist
3 0 0

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
Tourist
3 0 0

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
Shopify Partner
2 0 4

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
Tourist
3 0 0

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
Shopify Partner
4 0 0

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
Shopify Partner
122 10 37

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..

If my answer was helpful then please Like and Accept Solution 🙂
If you need help with design, development or marketing your store, contact me!
EPIQ
Visitor
1 0 0

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
Shopify Partner
34 1 33

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
New Member
11 0 0

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
Tourist
5 0 0

@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!

 

image (168) (1).jpgimage (169) (1).jpg

marcoswata
Shopify Partner
122 10 37

@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.

If my answer was helpful then please Like and Accept Solution 🙂
If you need help with design, development or marketing your store, contact me!
TAMARA_JOHNSON1
Tourist
5 0 0

@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
Shopify Partner
122 10 37

@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')

If my answer was helpful then please Like and Accept Solution 🙂
If you need help with design, development or marketing your store, contact me!
TAMARA_JOHNSON1
Tourist
5 0 0

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

TAMARA_JOHNSON1
Tourist
5 0 0

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

0FAB434B-F70B-42BE-929A-07F578CA00ED.png

4420AA83-B160-433F-A2A3-7813D84E68A9.png

Jaime_de_Helium
Shopify Partner
4 0 0

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

marcoswata
Shopify Partner
122 10 37

@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. 

If my answer was helpful then please Like and Accept Solution 🙂
If you need help with design, development or marketing your store, contact me!
TAMARA_JOHNSON1
Tourist
5 0 0

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

marcoswata
Shopify Partner
122 10 37

@TAMARA_JOHNSON1 Have you ever solved this?

If my answer was helpful then please Like and Accept Solution 🙂
If you need help with design, development or marketing your store, contact me!