Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Development Tools

Posted by olliecee2
olliecee2
1,550 Points

Webpack with fonts?

Hello!

I'm just curious to know if it is best practice to: Leave fonts inside the <head> element OR have them bundled with my other CSS files

Consider the two separate scenarios:

  1. Webpack with Font-Awesome, downloaded via Bower
  2. Webpack with Google Fonts, linked via Google CDN server

For situation 1, I almost feel like you could bundle it, but I'm getting too much errors and if it can even be bundled at all. For situation 2, I think it should be left as is

I've searched around Treehouse and Google, but there isn't really anything explaining what the best practice is. I was curious as to what the Treehouse community would say regarding both situations/scenarios.

olliecee2
olliecee2
1,550 Points

Actually, I figured out a way to include custom fonts like Font Awesome into my bundle process.

      {
        test: /\.(eot|svg|ttf|woff(2)?)(\?v=\d+\.\d+\.\d+)?/,
        loader: 'url-loader'
      }

I just added this into my webpack.config.js and required the font-awesome CSS file in my entry file. Voila, bundled!

A.J. Kandy
A.J. Kandy
Courses Plus Student 12,422 Points
A.J. Kandy
A.J. Kandy
Courses Plus Student 12,422 Points

The official docs seem to suggest that it may be convenient to bundle compiled CSS + font files as they may be dependencies, but in production, depending on how your JS executes, this can lead to the Flash of Unstyled Content (FOUC). Their recommendation is to keep those files separate in a production environment; you can use the extract-loader plugin to do so. (Caveat: I am not an expert; I just googled this).

https://webpack.js.org/loaders/less-loader/#extracting-style-sheets

olliecee2
olliecee2
1,550 Points

Thank you for that AJ

I agree with you that it would FOUC and that its recommended to bundle it into a CSS file and only use inline if its small bits of CSS code.

Maybe I should of said what my environment was running since it was too broad of a question.

I do have the ExtractTextPlugin included in my Webpack process to gather my CSS files and export them into a external file. Though the real problem is if I should bundle vendor files + custom css or bundle vendors together & bundle custom files together and export as two files to load?

So it would be:

<link href="vendor.bundle.css"/>
<link href="custom.bundle.css"/>

Versus

<link href="all.bundle.css"/>

I don't know what people are doing in the field but I would assume the vendor and custom bundle would be more optimized since having a large all bundle file would mean poor performance? What is everyones thought on this?