Skip to content

Error loading .otf font files #1994

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.

Sign up for GitHub

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

Jump to bottom
Closed
TheFirstDeity opened this issue Sep 6, 2016 · 3 comments · Fixed by #2159
Closed

Error loading .otf font files #1994

TheFirstDeity opened this issue Sep 6, 2016 · 3 comments · Fixed by #2159
Assignees
@filipesilva

Comments

@TheFirstDeity
Copy link

Please provide us with the following information:

1. OS

Windows 10

2. Versions

angular-cli: local (v1.0.0-beta.11-webpack.8, branch: master)
node: 6.5.0
os: win32 x64

3. Repro Steps

Created an app with the latest version of master, then added bootstrap and this font:
npm i --save source-sans-pro
Included them in my main styles.css file and got an error when running ng serve

/* styles.css */
@import url("../node_modules/bootstrap/dist/css/bootstrap.css");
@import url("../node_modules/bootstrap/dist/css/bootstrap-theme.css");
@import url("../node_modules/source-sans-pro/source-sans-pro.css");

4. The log given by the failure. ng serve

Version: webpack 2.1.0-beta.19
Time: 3124ms
                                 Asset     Size  Chunks       Chunk Names
  39b40cfcb316df61a5a9e48d29db74d0.ttf   293 kB
  f4769f9bdb7466be65088239c12046d1.eot  20.1 kB
  befd8cf046e763b665cab0a5ade929a3.eot   103 kB
  8e3f84f3b184897b1cbe5dea2a86e78c.eot   292 kB
  b35af156ddaef6f7e2c0110ebf7fae8f.eot   103 kB
  52d598098bb11d6a98573f2bae4f8468.eot   292 kB
  0d91dad620259787179d6fc9168aef65.eot   104 kB
  d488c16f2d1f790920b4b8377aa4a8e3.eot   104 kB
  e573bb40138e45b04a9a4c47508d37db.eot   294 kB
  6b1b85286afd14fcc330340543c720df.eot   104 kB
  82c5611d313a5d5be72897c7ef59f95e.eot   294 kB
  4019cd70f5908d5fdbecd716959fcf50.eot   293 kB
  4c9d790f1e883aa315121793c771db8f.eot   104 kB
  89889688147bd7575d6327160d64e760.svg   109 kB
  e18bbf611f2a2e43afc071aa2f4e1512.ttf  45.4 kB
 fa2772327f55d8198301fdb8bcfc8158.woff  23.4 kB
  60a663ad325c6559e17071430e18525a.ttf   290 kB
  e63a68bc9ffb55e121f386de1da4b7ab.ttf   103 kB
  2599a39a18b9726c611d815dffbba4bc.ttf   292 kB
  9baa9f9d98028f380c202e833863745e.ttf   103 kB
  8bfca62e77587ee0f2dd3c06d76c7bf8.ttf   292 kB
  ef10cbbe74965d35bc56e5d191c6c7e1.ttf   104 kB
  29bb28f7c90cd7dfb7a09c4561ca271e.ttf   104 kB
  4838df6177f11aa004692c3dfc204c31.eot   290 kB
  855d27d4302ff2af2f282f84324157a8.ttf   104 kB
  26add37c629cf15955b71bcb5efb2e02.ttf   294 kB
  bef69c3aefd6ca9f4ed6e03cfa83d117.ttf   292 kB
  c5430f5405a479e6dac1431f8ca7160f.ttf   103 kB
 80391e3815cfff1f2ee1024e9db5dd88.woff   132 kB
 c563ef31d26c5f9598e8e95d1d3b7e3f.woff  54.2 kB
 3bfca25c56db239ceab5a0c4940f1f24.woff   136 kB
 a83b890e7a2a99d546287478b1d55c30.woff  54.3 kB
 f2558c5a9e8fb9d3c022c6d27a62a239.woff   125 kB
 bd14278c5a4f83cd5a87e0750aa7167d.woff  50.1 kB
 d9957303d12ebd80115b931696b05ed3.woff  53.9 kB
 488b68e155537cf13d2c3af5200b359a.woff   130 kB
 6608f02dd314d9881eb719d8834acc8d.woff  52.3 kB
 788a2bcde2b05619551257e5f2053278.woff   133 kB
 7a89c69cdc383fe3ac47a5e4281e8f92.woff   135 kB
 178e79322ccaa80916919737b861e3c9.woff  54.3 kB
448c34a56d699c29117adc64c43affeb.woff2    18 kB
                        main.bundle.js  2.36 MB    0, 2       main
                      styles.bundle.js   207 kB    1, 2       styles
                             inline.js  5.11 kB       2       inline
                              main.map  2.82 MB    0, 2       main
                            styles.map   267 kB    1, 2       styles
                            inline.map  5.15 kB       2       inline

ERROR in ./~/source-sans-pro/OTF/SourceSansPro-ExtraLight.otf
Module parse failed: C:\Users\me\Source\Repos\Temp\node_modules\source-sans-pro\OTF\SourceSansPro-ExtraLight.otf Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ../angular-cli/~/css-loader!./~/source-sans-pro/source-sans-pro.css 6:361-406
 @ ../angular-cli/~/css-loader!../angular-cli/~/postcss-loader!./src/styles.css
 @ ./src/styles.css
 @ multi styles

ERROR in ./~/source-sans-pro/OTF/SourceSansPro-ExtraLightIt.otf
Module parse failed: C:\Users\me\Source\Repos\Temp\node_modules\source-sans-pro\OTF\SourceSansPro-ExtraLightIt.otf Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ../angular-cli/~/css-loader!./~/source-sans-pro/source-sans-pro.css 6:866-913
 @ ../angular-cli/~/css-loader!../angular-cli/~/postcss-loader!./src/styles.css
 @ ./src/styles.css
 @ multi styles

ERROR in ./~/source-sans-pro/OTF/SourceSansPro-Light.otf
Module parse failed: C:\Users\me\Source\Repos\Temp\node_modules\source-sans-pro\OTF\SourceSansPro-Light.otf Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ../angular-cli/~/css-loader!./~/source-sans-pro/source-sans-pro.css 6:1361-1401
 @ ../angular-cli/~/css-loader!../angular-cli/~/postcss-loader!./src/styles.css
 @ ./src/styles.css
 @ multi styles

ERROR in ./~/source-sans-pro/OTF/SourceSansPro-LightIt.otf
Module parse failed: C:\Users\me\Source\Repos\Temp\node_modules\source-sans-pro\OTF\SourceSansPro-LightIt.otf Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ../angular-cli/~/css-loader!./~/source-sans-pro/source-sans-pro.css 6:1846-1888
 @ ../angular-cli/~/css-loader!../angular-cli/~/postcss-loader!./src/styles.css
 @ ./src/styles.css
 @ multi styles

ERROR in ./~/source-sans-pro/OTF/SourceSansPro-Regular.otf
Module parse failed: C:\Users\me\Source\Repos\Temp\node_modules\source-sans-pro\OTF\SourceSansPro-Regular.otf Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ../angular-cli/~/css-loader!./~/source-sans-pro/source-sans-pro.css 6:2335-2377
 @ ../angular-cli/~/css-loader!../angular-cli/~/postcss-loader!./src/styles.css
 @ ./src/styles.css
 @ multi styles

ERROR in ./~/source-sans-pro/OTF/SourceSansPro-It.otf
Module parse failed: C:\Users\me\Source\Repos\Temp\node_modules\source-sans-pro\OTF\SourceSansPro-It.otf Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ../angular-cli/~/css-loader!./~/source-sans-pro/source-sans-pro.css 6:2814-2851
 @ ../angular-cli/~/css-loader!../angular-cli/~/postcss-loader!./src/styles.css
 @ ./src/styles.css
 @ multi styles

ERROR in ./~/source-sans-pro/OTF/SourceSansPro-Semibold.otf
Module parse failed: C:\Users\me\Source\Repos\Temp\node_modules\source-sans-pro\OTF\SourceSansPro-Semibold.otf Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ../angular-cli/~/css-loader!./~/source-sans-pro/source-sans-pro.css 6:3295-3338
 @ ../angular-cli/~/css-loader!../angular-cli/~/postcss-loader!./src/styles.css
 @ ./src/styles.css
 @ multi styles

ERROR in ./~/source-sans-pro/OTF/SourceSansPro-SemiboldIt.otf
Module parse failed: C:\Users\me\Source\Repos\Temp\node_modules\source-sans-pro\OTF\SourceSansPro-SemiboldIt.otf Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ../angular-cli/~/css-loader!./~/source-sans-pro/source-sans-pro.css 6:3792-3837
 @ ../angular-cli/~/css-loader!../angular-cli/~/postcss-loader!./src/styles.css
 @ ./src/styles.css
 @ multi styles

ERROR in ./~/source-sans-pro/OTF/SourceSansPro-Bold.otf
Module parse failed: C:\Users\me\Source\Repos\Temp\node_modules\source-sans-pro\OTF\SourceSansPro-Bold.otf Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ../angular-cli/~/css-loader!./~/source-sans-pro/source-sans-pro.css 6:4281-4320
 @ ../angular-cli/~/css-loader!../angular-cli/~/postcss-loader!./src/styles.css
 @ ./src/styles.css
 @ multi styles

ERROR in ./~/source-sans-pro/OTF/SourceSansPro-BoldIt.otf
Module parse failed: C:\Users\me\Source\Repos\Temp\node_modules\source-sans-pro\OTF\SourceSansPro-BoldIt.otf Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ../angular-cli/~/css-loader!./~/source-sans-pro/source-sans-pro.css 6:4762-4803
 @ ../angular-cli/~/css-loader!../angular-cli/~/postcss-loader!./src/styles.css
 @ ./src/styles.css
 @ multi styles

ERROR in ./~/source-sans-pro/OTF/SourceSansPro-Black.otf
Module parse failed: C:\Users\me\Source\Repos\Temp\node_modules\source-sans-pro\OTF\SourceSansPro-Black.otf Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ../angular-cli/~/css-loader!./~/source-sans-pro/source-sans-pro.css 6:5245-5285
 @ ../angular-cli/~/css-loader!../angular-cli/~/postcss-loader!./src/styles.css
 @ ./src/styles.css
 @ multi styles

ERROR in ./~/source-sans-pro/OTF/SourceSansPro-BlackIt.otf
Module parse failed: C:\Users\me\Source\Repos\Temp\node_modules\source-sans-pro\OTF\SourceSansPro-BlackIt.otf Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ../angular-cli/~/css-loader!./~/source-sans-pro/source-sans-pro.css 6:5730-5772
 @ ../angular-cli/~/css-loader!../angular-cli/~/postcss-loader!./src/styles.css
 @ ./src/styles.css
 @ multi styles
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  2.44 kB       0
webpack: bundle is now VALID.

5. Other Details

Is there currently a way to make the CLI use .otf files? If not, is there a config setting to treat them as vendor files or at least ignore them?
@Abubarrett
Copy link

I know this doesn't solve your .otf problem but I noticed you are using source sans pro. I would recommend using google fonts version of source sans pro. You can find it here.

https://fonts.google.com/specimen/Source+Sans+Pro

@TheFirstDeity
Copy link
Author

I think I found the answer I was looking for on a YouTube video. Tie-ins for custom Webpack loaders aren't implemented yet, but they're planned for the future according to:
https://youtu.be/obbdFFbjLIU?t=4m9s

I switched to using the Google Fonts version so it's not a problem :)

@filipesilva filipesilva mentioned this issue Sep 16, 2016
Merged
@filipesilva filipesilva self-assigned this Sep 16, 2016
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@filipesilva filipesilva

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

chore(build): add otf font support filipesilva/angular-cli
3 participants
@TheFirstDeity @filipesilva @Abubarrett