Sage 9 Adding Fonts

sage
1

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.

Any idea?
Thanks a lot

ps: Sage 9 looks really good already! The workflow has been seriously improved!

2 Likes
2

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.

4

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:

@font-face
{
font-family: ‘ostiaItalic’;
src:
url(‘fonts/Ostia/OstiaAnticaWeb-Italic.eot’),
url(‘fonts/Ostia/OstiaAnticaWeb-Italic.woff’) format(‘woff’)
}

then I have a 404 error for those public assets…
It is looking at this location:
http://localhost:7000/app/themes/sage/dist/fonts/Ostia/OstiaAnticaWeb-Italic.woff

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
Silvere

5

url('fonts/Ostia/OstiaAnticaWeb-Italic.eot'),

This is the wrong path.

Use ../fonts/ instead of fonts/.

If your Font Awesome fonts are 404ing then you have a path incorrectly configured.

1 Like
6

I’m not lucky there sorry. Even the fontawesome public links aren’t working out for me:

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)

In dist/assets.json I’ve got:

“vendor/fontawesome-webfont.ttf?v=4.7.0”: “vendor/fontawesome-webfont_b06871f2.ttf”

I tried both url:

http://***.net/app/themes/SDB/vendor/fontawesome-webfont.ttf?v=4.7.0
http://***.net/app/themes/SDB/vendor/fontawesome-webfont_b06871f2.ttf

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!

7

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 "wp-content/theme/[name_of_theme]"
found in resources/assets/config.json

3 Likes
8

Even though this is an old topic, I thought I would share these links.

Nice article:

Great tool for setting up your fonts:
https://google-webfonts-helper.herokuapp.com/fonts

9

Thanks for sharing this solution, it just resolved my issue.