[Bug]: Custom fonts in assets directory causing OTS parsing error

[mzachdev]

Please confirm that you have:

• [X] Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• [X] Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Theme

Expected behavior

Font files added to the assets directory should upload to the server on push, and be usable with an @font-face reference immediately with no errors in the browser's console blocking dev.

Actual behavior

When adding custom font files to my assets directory locally, then running shopify theme dev --theme-editor-sync the font files are uploaded to the temp dev server, but in the console I get this error:

Failed to decode downloaded font: http://127.0.0.1:9292/cdn/shop/t/8/assets/Bayard-Regular.woff2?v=135843728640516025251700896606
OTS parsing error: Failed to convert WOFF 2.0 font to SFNT

What does this mean? Why do custom fonts added to the assets directory cause this to happen? This error is blocking my custom fonts from working on the frontend during development.

FYI this is a known issue [https://community.shopify.com/c/technical-q-a/has-anyone-else-had-issues-with-corrupted-woff-or-woff2-files/m-p/1732103]

If I add the font files to Files using the admin side that works, and instead of asset_url I use file_url but this should work without admin access, using assets directory instead.

Verbose output

n/a

Reproduction steps

1. Add font files to assets directory
2. Create @font-face rule with link to font file using asset_url
3. Run shopify theme dev and check the browser's console to see if the font pushed is causing an error to appear

Operating System

Windows 11

Shopify CLI version (check your project's package.json if you're not sure)

v3.50.2

Shell

Bash, Powershell

Node version (run node -v if you're not sure)

v18.17.1

What language and version are you using in your application?

Ruby v31

[mzachdev]

On further investigation, it seems even when I upload the font files to Files in the admin and use file_url it still shows that error in the console. Or, it shows 405 (Method Not Allowed) after the URL, which is even more mysterious.

For reference:

Works: src: url('../assets/BAYARD-Regular.woff2') format('woff2'); Works: src: url('https://cdn.shopify.com/s/files/1/0790/0689/2327/files/Bayard-Regular.woff2?v=1700907223') format('woff2');

Doesn't work: src: url("{{ 'BAYARD-Regular.woff2' | asset_url }}") format('woff2'); Doesn't work: src: url("{{ 'BAYARD-Regular.woff2' | file_url }}") format('woff2');

[mzachdev]

According to your own docs, these methods should work:

src: url("{{ '[font-file-name]' | file_url }}") format("[font-format]"); and src: url("{{ '[font-file-name]' | asset_url }}") format("[font-format]");

[gonzaloriestra]

Hi! Thanks for creating the issue. Let me ping my colleagues from @Shopify/theme-code-tools

[mzachdev]

Hi @gonzaloriestra, did you hear back from your colleagues at @shopify/theme-code-tools? This is a major issue, in my opinion, and hoping it can get resolved in the next update.

[mzachdev]

A small follow-up: the error does not occur in the theme dev customizer, only on the frontend. If I upload the fonts to the Content > Files area in the Shopify admin, then use those URLs instead of trying to use asset_url then it works in both the customizer and frontend. But I still think there's a custom font in assets directory bug.

[lukeh-shopify]

Hey @mzachdev 👋🏻, thanks for reporting this bug and providing detailed information about the commands you were using.

---

Unfortunately I was unable to reproduce the bug on my end. Just to ensure we're on the same page with your workflow, here are the steps I was taking:

OS: Windows 11 Powershell: 5.1.26016.1000 Ruby: 3.1.4 Node: 18.17.1 CLI: 3.50.2

1. Downloaded a custom font in woff2 format
2. Added the file to the assets directory of my theme
3. Renamed base.css to base.css.liquid, and added the following lines of code to the end of the file:

@font-face {
  font-family: "My Font";
  src: url('{{ "myfont.woff2" | asset_url }}') format('woff2');
}

p {
  font-family: "My Font";
}

4. From within the theme directory, ran shopify theme dev --theme-editor-sync
5. Observed that the font file and css changes were synced remotely, and saw the new font being rendered in the UI of the dev server ✅
6. Removed the font file and reuploaded it without stopping the dev server
7. Observed that after removal, the font stopped being rendered. After adding it back, the font was successfully uploaded and was rendered again ✅

---

Would you mind comparing my steps with yours? If you're still having the same issue, could you please re-run the command with the --verbose flag appended to it, recreate the issue, and share any logs here.

Thank you!

[VedranCOI]

I do have same issue for quite some time now but our fonts are stored in files not assets.

CLI version 3.53.0 Windows 10 Node: 20.9.0 Ruby 3.0.2 Powershell 5.1.19041

We load fonts like this:

@font-face {
  font-family: 'CMMN Sans H';
  src: url("{{ type_header_font_url }}") format('woff2');
  font-style: normal;
  font-display: swap;
}

Where type_header_font_url = assign type_header_font_url = settings.type_header_font | file_url

and this works in preview and live stores, but not local enviroment.

Error we get is:

Maybe connected with cli issue 2856, which is still unresolved.

[MattWIP]

Is there any update on this? We just had this start happening one of our projects in the recent weeks.

[github-actions[bot]]

This issue seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action. → If there's no activity within a week, then a bot will automatically close this. Thanks for helping to improve Shopify's dev tooling and experience.

P.S. You can learn more about why we stale issues here.

[jamiestead]

I'm getting the same issue too all of a sudden, also Windows 11.

Using the preview link supplied by CLI (https://storename.myshopify.com/?preview_theme_id=123456789) works fine, but using the local URL (http://127.0.0.1:9292) gives the errors stated at the start of this thread and the correct font doesn't load.

[lukeh-shopify]

👋🏻 Hey @VedranCOI, @MattWIP, and @jamiestead. Thanks for reporting your experience with this issue. Unfortunately, I'm still unable to reproduce it on my end even after testing with a fresh Windows 11 / Shopify CLI & dependencies install and a brand new theme directory.

If possible, would you mind confirming you are following the same steps outlined in this comment? If you are still receiving the error, can you please re-run the dev command with --verbose appended to it, and share the logs here? Thank you!

shopify theme dev --verbose

[jamiestead]

Hi @lukeh-shopify thanks for the response. We are running a custom set up using webpack and a few other plugins for our custom theme, so our commands are different.

I was loading my custom fonts in a snippet in the HEAD of the site and this has been working fine for weeks, then last week I updated Shopify CLI (due to it causing an issue where it was opening the published site locally rather than my actual dev site) and that's when I started getting the font errors as mentioned by other users here. The errors only appear on the local preview (127.0.0.1:9292) and not on the Preview link (https://storename.myshopify.com/?preview_theme_id=123456789 or the Admin preview link) where the fonts work fine.

I've removed the font code from my snippet in the header and moved it into a standard CSS file which loads along with all other CSS and no longer get the errors and the fonts load correctly on the local preview (127.0.0.1:9292).

Strange that these errors only show on the local preview and not the standard preview, both generated by Shopify CLI. And this error only seems to have started after updating CLI. I'm the only dev at our company using Windows (11) and the devs on Linux and MacOS don't get this problem.

[lukeh-shopify]

I've removed the font code from my snippet in the header and moved it into a standard CSS file which loads along with all other CSS and no longer get the errors and the fonts load correctly on the local preview (127.0.0.1:9292).

Thank you @jamiestead, I've managed to recreate the issue because of this. It looks like a regression was indeed introduced in a prior version that broke being able to render font styles in a <style> tag. This seems to occur on Windows machines only.

For anyone else seeing this, a temporary workaround is to move any font style definitions into a dedicated CSS file (e.g. base.css.liquid). After doing this, rendering the font on the local dev server should work as expected.

In the meantime I'll try to track down what introduced this regression.

[muchisx]

+1 Getting this issue aswell.

.woff2 font file hosted in the /assets directory of an existing theme connected through the Github Integration. Remote Preview works but local development does not work, sending parsing OTS errors as OP mentions.

[tairli]

Looks like this is not CLI or Github integration related -- I've tried uploading fonts manually to Assets and output CSS with Custom liquid section. Luckily it worked fine with fonts in FIles.

https://community.shopify.com/c/shopify-design/custom-fonts-in-symmetry/m-p/2640577#M692933

I've uploaded the same file to Assets and Files and downloaded them back, then renamed to distinguish and they are even different size:

[github-actions[bot]]

This issue seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action. → If there's no activity within a week, then a bot will automatically close this. Thanks for helping to improve Shopify's dev tooling and experience.

P.S. You can learn more about why we stale issues here.

[muchisx]

This is still an issue, does not work on files in the /assets folder. Unrelated to doing it from the Files in the Shopify Admin.