ember-cli-materialize: 404's on Fonts

Alright, I have a much cleaner fix for you guys 😃

We are in luck that the Materialize guys have parameterized their font path.

All you need to do is define a different path before importing materialize in your app.scss file.

Example:

/** Small adjustment for Roboto font path **/
$roboto-font-path: "../assets/";

@import 'materialize';
@import 'ember-cli-materialize';


/** My other styles go here **/

I’ll update the installation blueprint and cut a new release so that others don’t run into this same problem

Thanks for the info guys. I think I can track this down now. Appreciate your patience

@lukeclewlow thanks, I did the same and it fixed the issue. Hopefully this helps others.

@allthesignals I had the same problem, it seems that materialize renamed their file structure at some point like you thought from font to fonts. I ran bower install materialize#0.97.1 and it has fixed the problem for me. The blueprint installs ~0.97.0 which now defaults to 0.97.8 which is after the change.

To get the fonts to work, I added following to node_modules/ember-cli-materialize/index.js

/* jshint node: true */
'use strict';

module.exports = {
  name: 'ember-cli-materialize',


  //add the following:
  included: function(app) {
    this._super.included(app);

    app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Thin.woff2', { destDir: 'fonts/roboto' });
    app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Thin.woff', { destDir: 'fonts/roboto' });
    app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Thin.ttf', { destDir: 'fonts/roboto' });
    app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Thin.eot', { destDir: 'fonts/roboto' });

    app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Light.woff2', { destDir: 'fonts/roboto' });
    app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Light.woff', { destDir: 'fonts/roboto' });
    app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Light.ttf', { destDir: 'fonts/roboto' });
    app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Light.eot', { destDir: 'fonts/roboto' });

    app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Regular.woff2', { destDir: 'fonts/roboto' });
    app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Regular.woff', { destDir: 'fonts/roboto' });
    app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Regular.ttf', { destDir: 'fonts/roboto' });
    app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Regular.eot', { destDir: 'fonts/roboto' });

    app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Medium.woff2', { destDir: 'fonts/roboto' });
    app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Medium.woff', { destDir: 'fonts/roboto' });
    app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Medium.ttf', { destDir: 'fonts/roboto' });
    app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Medium.eot', { destDir: 'fonts/roboto' });

    app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Bold.woff2', { destDir: 'fonts/roboto' });
    app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Bold.woff', { destDir: 'fonts/roboto' });
    app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Bold.ttf', { destDir: 'fonts/roboto' });
    app.import(app.bowerDirectory + '/materialize/dist/font/roboto/Roboto-Bold.eot', { destDir: 'fonts/roboto' });
  }
};