CODEWITHSUNDEEP
reactjswebpackhtml-webpack-plugin
kyw
kyw

Reputation: 7545

Webpack: Inline processed font file in index.html

I'm using html-webpack-plugin and I would like to insert my hashed font file to my custom index.html template.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
     <style>
        @font-face {
          font-family: Inter;
          src: url("<%= ?????? %>") format("woff2");
        }
     </style>

And I import the font in my entry file app.js like import "./fonts/inter.woff2"

I can't figure out how to get the reference of the processed font asset.

Upvotes: 1

Views: 1470

Answers (2)

kyw
kyw

Reputation: 7545

This question was part of my effort to inline some critical CSS which contains my font-face too.

First, follow this mini-css-extract-plugin guide to extract CSS based on entry. Though one thing I did differently was I directly provide the SCSS file that contains my critical CSS index.scss as a separate entry chunk named critical:

// webpack.config.js
module.exports = {
  entry: {
    app: 'index.js',
    critical: path.resolve(__dirname, "../src/index.scss")
  },

Then in my index.html we will utilize the webpack's compilation and html-webpack-plugin's htmlWebpackPlugin object:

// index.html
<style>
   <%= compilation.assets[htmlWebpackPlugin.files.chunks.critical.css[0]].source() %>
</style>

And there you have it- The content of your critical index.scss being inlined in your index.html!

Upvotes: 1

felixmosh
felixmosh

Reputation: 35553

From what I know, HTMLWebpackPlugin has a template variable htmlWebpackPlugin that has js & css links, it won't contains all the webpack assets.

I have an alternative solution, instead of importing the font with js, import a css that has the font usage, this way, you can configure that webpack will inject the css into html.

So, it will look like that:

// index.js
import 'styles.css';


// styles.css
@font-face {
    font-family: Inter;
    src: url("./font.woff") format("woff2");
}

Upvotes: 0

Related Questions