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 trialolliecee2
1,550 PointsWebpack 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:
- Webpack with Font-Awesome, downloaded via Bower
- 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.
A.J. Kandy
Courses Plus Student 12,422 PointsThe 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
1,550 PointsThank 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?
olliecee2
1,550 Pointsolliecee2
1,550 PointsActually, I figured out a way to include custom fonts like Font Awesome into my bundle process.
I just added this into my webpack.config.js and required the font-awesome CSS file in my entry file. Voila, bundled!