Font working locally, but not in production

Phoenix Forum Questions / Help
,
1

I have a font that is included from app.scss, like this:

@import "../fonts/groxioregular/stylesheet.css";

with this directory structure:

assets 
  /static/css/app.scss
  /fonts/groxioregular/stylesheet.css

Runs fine locally, but when I run:

  npm run deploy   (production mode) 
MIX_ENV=prod  mix phx.digest

and deploy to gigalixir, it doesn’t show. i look in the digest and the font doesn’t seem to be imported.

Phoenix 1.4.

Can anyone provide any insight? Trying to get the next chapter of programming phoenix out but I need to solve this problem first.

1 Like
2

How does your webpack rules looks like? Mine are something like this…

      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?(\?.*$|$)/,
        use: 'url-loader?&limit=10000&name=/fonts/[name].[ext]',
      },
      {
        test: /\.(eot|ttf|otf)?(\?.*$|$)/,
        loader: 'file-loader?&limit=10000&name=/fonts/[name].[ext]',
      },

I put this in my app.scss

@import './fonts.scss';

and in fonts.scss

@font-face {
  font-family: openSans;
  src: url("./fonts/open_sans.ttf") format("truetype"); /* For IE */
  src: local("open_sans"), url("./fonts/open_sans.ttf") format("truetype"); /* For non-IE */
}

...
1 Like
3

Thanks for the reply.

web pack rules:

  { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader' },
		{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },

I am not getting any font load errors in the log, so probably is ok? I also have fonts I am loading from google that are doing ok.

I will try your ./fonts.scss format.

-bt

1 Like
4

I also have this in my loader… don’t know if this change something.

&name=/fonts/[name].[ext]
1 Like
5

hm… My app css is in assets/static/css and my fonts and font css are in assets/static/fonts. But my paths are relative and the webpack seems to pick up the css and font, but when I build the digest I can’t find the css in the digest at all.

So I must be doing something wrong in the deploy which mostly works.

I run:

cd assets
npm run deploy
cd …
MIX_ENV=prod mix phx.digest

and I can push but at this point there’s an app.css in priv/static/css but it doesn’t have my font in it.

Any ideas?

6

I added that. Still works locally… trying to deploy now

7

Thanks for your help. Still no dice. It’s just not getting added to the main app.css. The import is just not there, nor the embedded stylesheet styles.

8

This doesn’t seem to match the paths in your original post, where it looks like the fonts folder resides in assets, not static. Could it be that you need to move the fonts folder into static?

3 Likes
9

The formatting of the first post ate the indentation. But I have progress. Not success, mind you, but progress.

Fonts are in assets/static/fonts; css is in assets/static/css. Right now the font CSS is embedded into app css to take a variable out of the equation.

To eliminate css building, I embedded the font CSS into my app CSS until I can get this working. Here’s the news.

  • If I do a npm run deploy the fonts are STILL not included into priv/static/css/app.css. It’s getting compiled; the custom fonts are embedded as data fonts and all is well. I can tell the old app file is getting overwritten.

  • If phoenix live reload builds it, all works as expected. So my web pack configuration is broken somewhere.

I don’t know how all this works… anyone got a guess as to what might be wrong?

10

brighteyes for the win. I had been looking at the directory structure for so long I didn’t see it. My fonts were in assets/fonts and not assets/static/fonts so webpack was silently omitting them from the compiled app.css.

3 Likes