Hi, what is the best way to add fonts with Sage 9?
I’ve added the font folder in assets/fonts/ but then I don’t know how to declare it with WebPack so it copies those font files in the dist folder.
Thanks a lot
ps: Sage 9 looks really good already! The workflow has been seriously improved!
Just add fonts in assets/fonts/ also don’t forget
@font-face rules in scss and after building (npm run build) all fonts with @font-face rule should appear in dist/fonts folder.
Hi thanks your reply, it succefuly copies the font files in dist/fonts/Ostia/OstiaAnticaWeb-Italic.eot but when I set the src for that font face such as:
then I have a 404 error for those public assets…
It is looking at this location:
My publicPath is set to be: “/app/themes/SDB”
What am I doing wrong?
The same happens with the production version with fontawesome for example:
http://*******.net/app/themes/SDB/dist/vendor/fontawesome-webfont_b06871f2.ttf Failed to load resource: the server responded with a status of 404 (Not Found)
Thanks a lot for your help
This is the wrong path.
../fonts/ instead of
If your Font Awesome fonts are 404ing then you have a path incorrectly configured.
I’m not lucky there sorry. Even the fontawesome public links aren’t working out for me:
Failed to load resource: the server responded with a status of 404 (Not Found)
In dist/assets.json I’ve got:
I tried both url:
But neither work. publicPath is definitely “publicPath”: “/app/themes/SDB”,
I don’t know what I’m doing wrong there.
By the way I cannot npm build on the server since OVH won’t let me have SSH with my current plan. I’m transferring the necessary files via ftp, it’s a massive pain.
Files I’m transferring when updating are template and dist, other files are already there such as src/ assets/ vendor/ could this be the problem?
Thanks for the help!
I know this is an old post, but maybe my findings will help somebody.
If you are using sage 9 (not Bedrock or Trellis), you need to change
publicPath from “
app/theme/[name_of_theme]” to "
Even though this is an old topic, I thought I would share these links.
Typography is fundamental to good design, branding, readability, and accessibility. Webfonts enable all of the above and more: the text is selectable, searchable, zoomable, and high-DPI friendly, providing consistent and sharp text rendering...
Great tool for setting up your fonts:
Thanks for sharing this solution, it just resolved my issue.