How do I import fonts?

[mralessio]

I'm trying to import the fonts from app.scss @import "~material-design-icons/iconfont/material-icons";

but getting the error that no font files found: ERROR in ./~/css-loader?{"sourceMap":true}!./~/postcss-loader?{"sourceMap":true}!./~/sass-loader/lib/loader.js?{"sourceMap":true}!./resources/assets/sass/app.scss Module not found: Error: Can't resolve './MaterialIcons-Regular.eot' in 'c:\OpenServer\domains\project.dev\web\app\themes\tonik\resources\assets\sass' and so for the every file.

May I ask for a help, what is the correct way of importing fonts?

[jedrzejchalubek]

This is common gotcha with webpack and how it handles the path resolving. It is required here to understand how it works.

The error you have here have all information. It can't find the MaterialIcons-Regular.eot file in resources\assets\sass. Why webpack search for it here? This happens because the material-design-icons package uses relative urls to point its font files in material-design-icons/iconfont/material-icons.css file:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(MaterialIcons-Regular.ttf) format('truetype');
}

Unfortunately, this package don't have a variable for font path which we can change. We have to manually rewrite paths in @font-face to webpack compatible.

I would copy content of node_modules/material-design-icons/iconfont/material-icons.css to my own file resources/assets/sass/fonts/meterial-design-icons.scss. Change path of font files and import it in main app.scss instead of original material-icons.css.

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(~/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(~/material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
       url(~/material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'),
       url(~/material-design-icons/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

Sidenote#1

Things get a lot of easier when font package specifies a path variable for fonts. Let's take a font-awesome as an example:

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

Sidenote#2

At Laracast there is a great lesson about this problem.

[mralessio]

Many thanks for such a detailed answer. Done as you have suggested.