Skip to content

Minification steps in assets/fonts leading to error #977

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ashishbajaj99 opened this issue May 27, 2015 · 7 comments
Closed

Minification steps in assets/fonts leading to error #977

ashishbajaj99 opened this issue May 27, 2015 · 7 comments

Comments

@ashishbajaj99
Copy link

I have a @font-face declaration in my app.css file that kinda looks like the follows:

@font-face {
    font-family:Fantastica;
    src:url(../assets/fonts/fantastica.ttf) format('truetype');
    font-weight:400;
    font-style:normal
}

Upon running grunt build I see that the build system runs a rename of all the assets to help with browser caching here:

rev: {
      dist: {
        files: {
          src: [
            '<%= yeoman.dist %>/public/{,*/}*.js',
            '<%= yeoman.dist %>/public/{,*/}*.css',
            '<%= yeoman.dist %>/public/assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
            '<%= yeoman.dist %>/public/assets/fonts/*'
          ]
        }
      }
  },

This causes my fonts to get renamed, but the usemin step doesn't seem to be handling fonts correctly. This causes my fonts to not get loaded in the final built version.

@Awk34
Copy link
Member

Awk34 commented May 27, 2015

Yeah, the minification process doesn't rename assets in css locations. This is also an issue if you try to use a background image in your css. The short-term solution is to just comment out the fonts line in your rev task.

@ashishbajaj99
Copy link
Author

Thanks @Awk34. Do you guys plan to have a long term solution in place? What would be the tentative ETA for this?

@Awk34
Copy link
Member

Awk34 commented May 28, 2015

I haven't really looked into it, IDK if anyone else has either.

@ashishbajaj99
Copy link
Author

Ok thanks, will see if I can get to it and submit it as a pull request at some point.

@tommybananas
Copy link

So if you need background-image url's in css, there is no way to do it unless you move those assets out of the minification phase?

@riderx
Copy link

riderx commented Mar 7, 2016

you just need to update the grunt file like this in usemin declaration:

patterns: {
          js: [
            [/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images']
          ]
        }

to ->

        patterns: {
          css: [
            [/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the CSS to reference our revved images']
          ],
          js: [
            [/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images']
          ]
        }

it's fix the problem for including image in css, i will see how to fix for font

@riderx
Copy link

riderx commented Mar 8, 2016

for font i do this :

        patterns: {
          css: [
            [/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the CSS to reference our revved images'],
            [/(assets\/fonts\/.*?\.(?:woff|woff2|ttf))/gm, 'Update the CSS to reference our revved fonts']
          ],
          js: [
            [/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images']
          ]
        }

for make it work you need to put font in the right directory and not call them with relative path

@Awk34 Awk34 closed this as completed in 5a24b83 Mar 10, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants