Using "PolymerElements/font-roboto-local" leads to an ERROR during build process

[giftkugel]

Hi there,

I've added the Polymer component "font-roboto-local" to the demo project inside this repository and I receive errors during the build. Seems that the loader tries to resolve the local TTF fonts as modules. When I switch to the Polymer component "font-roboto" everything works fine, because of the external link inside the "font-roboto" component.

Here how you can reproduce the behavior. In the demo folder do the following steps:

Add the following dependency to your bower.json "font-roboto": "PolymerElements/font-roboto-local"

Add the following import to the my-element.html <link rel="import" href="../bower_components/font-roboto/roboto.html">

Then run

bower install
npm install
npm run build

You will receive some errors like that

ERROR in ./bower_components/font-roboto/fonts/robotomono/RobotoMono-Bold.ttf
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./bower_components/font-roboto/roboto.html 5:3216-3265
 @ ./src/my-element.html
 @ ./src/index.js

I have added a git patch file which you can apply to the repository to reproduce the error. issue-font-local.patch.txt

Would be nice to see a fix for that problem, because I don't want to use the external version of the font.

Regards Simon

[ChadKillingsworth]

That's not an issue with this loader - that means the loader is working.

Webpack doesn't know how to handle a .ttf file natively. You need a loader for that. You are probably looking for https://webpack.js.org/loaders/file-loader/

[giftkugel]

Shame on me! Haven't thought about that. :open_mouth:

Works for me now! After adding the dev dependency for file-loader into my package.json and the following lines into the webpack.config.js.

{
        test: /\.(png|jpg|gif|ttf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}  
          }
        ]
      }

Thank you! 👍

[ChadKillingsworth]

It's a common question / issue. Especially when someone is new to webpack.