Referencing fonts doesn't work with cache busting

sage9
webpack

#1

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


#2

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:

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

#3

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!


#4

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

  1. Have you modified the webpack config script at all?
  2. Can you paste the corresponding @font-face rule from your production main.css (the one compiled in the dist folder)?
  3. Can you share at least some of your dist/assets.json file?
  4. 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


#5

That’s a good thing already!

  1. Nope, I didn’t modify the webpack config.

  2. @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")
    }
    
  3. {
     "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?

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


#6

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.


#7

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.


#8

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.


#9

@bramvdpluijm1, @jdarrohn,

  1. Can you confirm that the dist/fonts folder is empty after running yarn build:production?
  2. 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)?


#10

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.


#11

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?


#12

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


#13

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.


#14

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


#15

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


#16

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


#17

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


#18

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