CODEWITHSUNDEEP
angularwebpack
Aarmora
Aarmora

Reputation: 1153

No error, no sign of webfonts

I'm using webpack to load angular 2. I'm trying to load some custom webfonts but I don't see any sign that it is loading in.

I'm using settings similar to this question.

app.component.ts:

@Component({
  directives: [ROUTER_DIRECTIVES],
  providers: [
    AccountService,
    CredentialsService,
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS
  ],
  selector: 'my-app',
  styleUrls: [
    require('../../styles/shared.scss'),
    require('../../styles/fonts/MyFontsWebfontsKit.css')
  ],
  template: require('../../views/app.component.html')
})

MyFontsWebfontsKit.css:

@font-face {font-family: 'ProximaNovaA-Thin';
src: url('webfonts/2C68D6_0_0.eot');
src: url('webfonts/2C68D6_0_0.eot?#iefix') format('embedded-opentype'),
url('webfonts/2C68D6_0_0.woff2') format('woff2'),
url('webfonts/2C68D6_0_0.woff') format('woff'),
url('webfonts/2C68D6_0_0.ttf') format('truetype');}

Webpack config:

  {
      test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
      loader: 'url-loader'
  },
  {
    test: /\.css$/,
    loader: 'raw'
  },
  {
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
  }

If I just link to the file with <link href="/source/styles/fonts/MyFontsWebfontsKit.css" rel="stylesheet"> in my html, it works fine with a development webpack server. How does my webpack configuration need to change to be able to load these webfonts?

Upvotes: 1

Views: 341

Answers (1)

maxisam
maxisam

Reputation: 22735

How about try this css-loader ?

https://github.com/webpack/css-loader

currently you load css as raw, I don't think it will load your font

Upvotes: 1

Related Questions