Referencing fonts doesn't work with cache busting

bramvdpluijm1 · May 13, 2018, 5:19pm

Hey guys, I recently started working with Sage 9 and I encounter a problem when I want to add fonts to my site.

I added the fonts to the ‘resources/assets/fonts’ folder. When I run yarn start the fonts load correctly in development mode. When I run yarn build:production the fonts get cache busted end end up in the dist folder with a hash behind it. The problem is that the stylesheet still references to the normal name of the font before it was cache busted and the browsers throws a 404 for these font files.
I already saw that you can reference assets from a theme folder with the "@asset’ function for correct paths.
How do I get this to work with font files?

Thanks in advance,
Bram

mmirus · May 14, 2018, 8:36pm

Hey @bramvdpluijm1 - you shouldn’t need to take any extra steps. When webpack generates your production CSS, it should replace replace the filenames so that they point to the cachebusted files.

Can you:

Post one of your @font-face blocks from your CSS
Check your yarn build:production output and make sure there aren’t any related messages in there?

bramvdpluijm1 · May 15, 2018, 9:14am

The point is that it does not change the urls of the font-face rule.

this is an example front-face rule:

@font-face {
    font-family: 'aeroregular';
    src: url('../fonts/aero-webfont.woff2') format('woff2'),
         url('../fonts/aero-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Again: the font files in the dist folder do get the cachebusted hash. Running yarn build:production does not result in any warnings or errors. What am I missing?

Thanks for your help!

mmirus · May 15, 2018, 2:26pm

Yep, I understand the problem you’re hitting. Can you share a few more things to help troubleshoot?

Have you modified the webpack config script at all?
Can you paste the corresponding @font-face rule from your production main.css (the one compiled in the dist folder)?
Can you share at least some of your dist/assets.json file?
Can you share the contents of resources/assets/config.json (and double check that your paths are set correctly)?

Related: Referencing images in dist/images with cache busting suffix

bramvdpluijm1 · May 15, 2018, 3:15pm

That’s a good thing already!

Nope, I didn’t modify the webpack config.

@font-face {
    font-family: aeroregular;
    font-style: normal;
    font-weight: 400;
    src: url(/wp-content/themes/{projectname}/dist/fonts/aero-webfont_28264d54.woff2) format("woff2"),
         url(/wp-content/themes/{projectname}/dist/fonts/aero-webfont_1f40a921.woff) format("woff")
}

{
 "fonts/aero-webfont.woff": "fonts/aero-webfont_1f40a921.woff",
 "fonts/aero-webfont.woff2": "fonts/aero-webfont_28264d54.woff2",
 "fonts/exo-bold-webfont.woff": "fonts/exo-bold-webfont_91624f54.woff",
 "fonts/exo-bold-webfont.woff2": "fonts/exo-bold-webfont_5e4d9a81.woff2",
 "fonts/exo-light-webfont.woff": "fonts/exo-light-webfont_fb7bed2d.woff",
 "fonts/exo-light-webfont.woff2": "fonts/exo-light-webfont_cc7b47a5.woff2"
}

It seems that the cache busting hash is correct in this file, right?

I think this is where the problem is:

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/wp-content/themes/{project name}",
  "devUrl": "http://localhost:8888/{project name}",
  "proxyUrl": "http://localhost:3000/{project name}",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}

You’re saying that I have to double check my paths. Does that mean I have to setup a different path in here for the fonts?

Thanks in advance!

mmirus · May 15, 2018, 4:48pm

In your @font-face example above from the compiled main.css, it looks like it actually is adding the cachebusting suffix to the file name.

This from your original styles:

url('../fonts/aero-webfont.woff2')

became:

url(/wp-content/themes/{projectname}/dist/fonts/aero-webfont_28264d54.woff2

If that’s the case, I don’t think the problem is cache busting.

That suggests the problem may actually be your paths as in the thread I linked to. Can you verify that your publicPath, specifically, is correct?

I’m assuming that your devUrl and proxyUrl are both working (you can load the site at each URL).

You do not need a separate path for your fonts.

jdarrohn · May 16, 2018, 12:07am

In a similar space, when I run yarn build, I am seeing all of my fonts moved into my dist/fonts folder, and also Font Awesome being pulled into dist/vendor, which is great. When I run yarn build:production none of these fonts are appearing. Is there an additional step needed? Is my workflow wrong? If I can get this working then it’s smooth sailing with Sage 9. Thank you for any insight.

bramvdpluijm1 · May 16, 2018, 9:26am

The cache busting is correct indeed, you’re right. It’s the wp-content/themes/.... path that’s causing issues I think. On the other hand: changing the publicPath will probably screw up the styles path in my php files.

The thread is not really explanatory about what needs to be changed to get it working. He only says he changed something and it magically works now.

The devUrl and proxyUrl are both working as it should.

I’m experiencing the exact same thing as @jdarrohn.

mmirus · May 16, 2018, 4:39pm

@bramvdpluijm1, @jdarrohn,

Can you confirm that the dist/fonts folder is empty after running yarn build:production?
Can you compare your publicPath and the @font-face paths in your compiled (production build) dist/main_asdf1234.css file to your actual folder structure on your machine to make sure they match?

@bramvdpluijm1, can you clarify what you mean by “changing the publicPath will probably screw up the styles path in my php files” (with examples of the code from your PHP as appropriate)?

jdarrohn · May 17, 2018, 12:59am

Thank you for the reply. It’s actually not building the dist/fonts folder at all, nor the dist/vendor folder, which hold Font Awesome. Additionally, I added a /components/cards.scss file to style my Bootstrap 4 cards, and that file isn’t loading either. It’s almost as though yarn/webpack is compiling from a cache or something. Is that a thing? Is there a way to clear it if that is?

Just to clarify, yarn build is creating these files/folders just fine. It’s just the production build that is not.

jdarrohn · May 17, 2018, 1:09am

Do I need to switch my WP_ENV='development' to production within my .env file for it to work?

Edit I tried this and it did not work, though I would probably have to re-provision the VM to pull in those environment variables, no?

jdarrohn · May 17, 2018, 1:23am

@mmirus Thank you for taking time to look at this. I couldn’t imagine doing OSS, so just know that I am appreciative of your time.

ben · May 17, 2018, 3:33am

If you are using the Bootstrap navbar and run into issues with missing styles after a production build, see roots/sage#2017 and the recommended fix.

jdarrohn · May 17, 2018, 3:56am

This worked – thanks man. I saw that in the docs and totally spaced on it. Totally crushing with Sage 9 now. Good stuff!

mmirus · May 17, 2018, 2:52pm

@bramvdpluijm1 does @ben’s post solve your problem, as well, or do we need to continue troubleshooting?

bramvdpluijm1 · May 17, 2018, 3:09pm

Did not find the time to test this, as it’s a side project of mine. Will let you know within a few hours!

bramvdpluijm1 · May 21, 2018, 11:25am

@mmirus Sorry that it’s taking so long for me to respond…

My dist/fonts folder is actually there with cache busted files inside of it after running yarn build:production.

If I compare the publicPath with the @font-face paths, I see they actually match as it should. At least the first part. (is this right ?)

This is the path from the compiled css file.
/wp-content/themes/{projectname}/dist/fonts/aero-webfont_28264d54.woff2

This is the publicPath:
/wp-content/themes/{projectname}

I’m not using Bootstrap or the Bootstrap navbar. Please keep troubleshooting. I have a clue why it’s not working by the way, but I don’t really know how to fix it.

After looking for an hour I noticed that it is looking on this path:
http://localhost:8888/wp-content/themes/{projectname}/dist/fonts/exo-light-webfont_fb7bed2d.woff

but my site is running on:
http://localhost:8888/{projectname}

So: if the path would be http://localhost:8888/{projectname}/wp-content/themes/{projectname}/dist/fonts/exo-light-webfont_fb7bed2d.woff it works because I tried that.

The odd thing is that it actually finds all my fonts and other assets when I run yarn start.

mmirus · May 21, 2018, 3:29pm

@bramvdpluijm1 just for kicks, can we see what happens if you set your publicPath to:

"publicPath": "/{project name}/wp-content/themes/{project name}",

Seems redundant to me since you already have the starting “/{project name}” in your devUrl, but worth a shot to rule it out.

Make sure you rerun yarn build:production after the config change.

dangelion · April 5, 2019, 4:39pm

@bramvdpluijm1 @mmirus I’m having this same problem. Someone solved this?

mmirus · April 5, 2019, 5:34pm

@dangelion most likely your config values aren’t set up correctly. You might want to try searching Discourse for localhost:8888 if you have the same setup as described above and see how people have resolved similar problems.

Beyond that, if you share exactly what you’re encountering (what’s happening with the fonts, what URLs your browser is trying to load for the page and for the font files, and the contents of your config.json file), then I might be able to spot what’s going on. My setup is different (I’m using valet), though, so my troubleshooting options are limited.

If you really can’t solve it and you’re using mamp/wamp/xampp or similar, you could also consider switching to a better local setup–no offense intended, I just don’t think they’re great tools for this job given all the other options out there.