0

I am relatively new to webpack and think I have some gaps in my understanding as far as how certain pieces feed into each other. I am having trouble accessing the fonts I'm trying to pack up in my browser. I have rules and loaders for the font file types, and I even see the font files in the Asset list in my console output. However, when I open my browser dev tools and view the sources tab, I do not see my font files present.

Here is a gist with my webpack: https://gist.github.com/moranm6/b59e5c0003fedca665301f54f32d7da4 I'm walking through trying to understand each piece right now

Does anyone have any advice for how I might track down the disconnect between seeing my font files listed in the "Asset" list of the webpack console output (after npm start) and them appearing in the browser? What code is responsible for adding these font files to my browser sources?

I have access to another app where these font files are successfully loaded into the browser but I cannot gleam what makes this happen.

I added rules and loaders as described in this tutorial but still cannot get my fonts to load in the browser. I tried using both url-loader and file-loader.

EDIT: Steve asked how I am referencing the fonts. I am importing a css file from an npm package and this package includes the fonts. Inside the css file I import, the font family definitions look like:

@font-face{
    font-family:ABBVoice-light;
    src:url(bundled_assets/ABBvoice_W_Lt-1rQKI.eot);
    src:url(bundled_assets/ABBvoice_W_Lt-1rQKI.eot?#iefix) format("embedded-opentype"),url(bundled_assets/ABBvoice_W_Lt-3Vcoi.woff2) format("woff2"),url(bundled_assets/ABBvoice_W_Lt-7ibc6.woff) format("woff"),url(bundled_assets/ABBvoice_W_Lt-1WmEF.ttf) format("truetype");
    font-weight:300;
    font-style:normal
}
user95227
  • 1,853
  • 2
  • 18
  • 36
  • How are you referencing the fonts in your app? – Steve Holgado Feb 05 '20 at 19:15
  • @SteveHolgado I added an explanation and example to the end of my question. Thanks for asking – user95227 Feb 05 '20 at 19:49
  • I can recommend keeping it simple and leaving webpack out of this. Just put your font-face declaration in its own CSS file that is not part of any bundling or build process, then make sure your HTML template loads that _separately from whatever else you're loading_ and then just use your custom font family name in the rest of your styling code. Don't add unnecessary layers of complexity by bundling or transforming static assets that change maybe once every few years, if not (much, much) longer. – Mike 'Pomax' Kamermans Feb 06 '20 at 16:13

0 Answers0