Can't reference rev'ed font properly. CSS file isn't updating the path.

[vennsoh]

Hi,

I have a webfont that I am using. I placed the fonts folder in my styles directory as mentioned in the gruntfile.js ( 'styles/fonts/{,/}.*' ) Grunt serve is showing my fonts properly but after I built the file, it no longer works because the font filename has been prefixed with some weird gibberish characters. eg: 63b122ab.fontname.ttf instead of fontname.ttf

This might be some cache busting method? But my .css file isn't updating the path to pick it up.

In my usemin block within gruntfile.js

What should I do? I have this currently but it is not working. usemin: { options: { assetsDirs: ['<%= config.dist %>', '<%= config.dist %>/images', '<%= config.dist %>/styles/fonts'] }, html: ['<%= config.dist %>/{,/}.html'], css: ['<%= config.dist %>/styles/{,/}.css'] },

It is picking up everything else but not the fonts. I manually created the fonts folder. So I am guessing the gruntfile.js has to be updated to reflect the change.

[solcre]

Having the same problem here, any hints ?

[cal-a-mari]

I'm having the same problem for both images and fonts.

[vennsoh]

Uncomment the line that "rev" the fonts.

I don't have issues with images.

[stephanebachelier]

@vennsoh I may be wrong but I think you are using grunt-rev?

[stephanebachelier]

@vennsoh @mbatilando can you share your configuration ?

[moneytree-doug]

I am having the exact same issue, and I am using filerev

[sonarxavier]

@stephanebachelier same problem here using:

• grunt-rev 0.1.0
• grunt-usemin 3.0.0

Also tried with grunt-filerev and same problem, the font paths aren't updated

[moneytree-doug]

This might help some people, so if you are using cssmin, it would rebase the URLs. You want to disable that for the cssmin and then use compass to help you generate font-urls. For example,

cssmin: {
  options: {
    root: '<%= yeoman.app %>',
    noRebase: true
  }
}

Notice the function font-url():

@font-face {
  font-family:'webfont';
  src: font-url('webfont.eot');
  src: font-url('webfont.eot') format('embedded-opentype'),
   font-url('webfont.woff') format('woff'),
   font-url('webfont.ttf') format('truetype'),
   font-url('webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

compass: {
      options: {
        sassDir: '<%= yeoman.app %>/styles',
        cssDir: '.tmp/styles',
        generatedImagesDir: '.tmp/images/generated',
        imagesDir: '<%= yeoman.app %>/images',
        javascriptsDir: '<%= yeoman.app %>/scripts',
        fontsDir: '<%= yeoman.app %>/styles/fonts',
        importPath: 'bower_components',
        httpImagesPath: 'images',
        httpGeneratedImagesPath: '/images/generated',
        httpFontsPath: 'fonts',
        relativeAssets: false,
        assetCacheBuster: false,
        raw: 'Sass::Script::Number.precision = 10\n'
      }
}

[stephanebachelier]

@moneytree-doug thanks for coming back. I will take a look, but IMO it's a bug.

[vennsoh]

I am using Gulp now and it is fine over that side of things (:

[kunal12422]

any update on this? I'm having the same issue. @vennsoh Did you find any solution for that?

[vennsoh]

@kunal12422 Try Gulp?

[kunal12422]

@vennsoh Thanks for the help. I'd comment that line of operation until It is fixed or will try gulp (:

filerev: { dist: { src: [ '<%= yeoman.dist %>/<%= yeoman.client %>/!(bowercomponents){,/}.{js,css}', '<%= yeoman.dist %>/<%= yeoman.client %>/assets/images/{,/}_.{png,jpg,jpeg,gif,webp,svg}'

    /*  , '<%= yeoman.dist %>/<%= yeoman.client %>/assets/fonts/*' */
    ]
  }
}

[tangorri]

Moving to Gulp is not possible at this time. thanks @moneytree-doug I'll try to adapt this to node-sass as I removed compass. I'll search for it. EDIT : this may be the solution https://github.com/fetch/node-sass-asset-functions EDIT2: https://github.com/fetch/node-sass-asset-functions works pretty but I've found this famous repo: https://github.com/sass-eyeglass/eyeglass