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