Injecting font files links

[gkatsanos]

Hello,

I tried to have my custom fonts preloaded :

<link rel="preload" href="/static/fonts/FiraGO-Regular.b68.woff2" as="font" type="font/woff" crossorigin="anonymous">

but I wasnt able with several configuration options.

Where should the font files be imported to force the plugin to generate the <link>s?

Is the plugin capable of that? (I read some old Pull Requests hinting this is not possible)

[jeffposnick]

It should work, assuming there's a .woff2 file is part of your webpack asset pipeline:

preload-webpack-plugin/index.js

Line 120 in e29cdd4

else if (entry.match(/\.woff2$/)) asValue = 'font';

It's not going to add the type or crossorigin attributes to the <link> tag, but they shouldn't be necessary, assuming your HTTP server knows the proper Content-Type to use for.woff2 files, and assuming that you're loading the font resource from a local server (rather than CDN).

[gkatsanos]

It should work, assuming there's a .woff2 file is part of your webpack asset pipeline:

Could you elaborate on that?

[jeffposnick]

I think the best reference is https://webpack.js.org/guides/asset-management/#loading-fonts

If you're following the steps there to include .woff2 files as part of the asset pipeline, and using the preload-webpack-plugin, then I'd expect that you'd see the <link as="font" ...> automatically added to your HTML.

[madmoizo]

@jeffposnick assets processed by file-loader are not included. So this test

preload-webpack-plugin/index.js

Line 120 in e29cdd4

else if (entry.match(/\.woff2$/)) asValue = 'font';

is probably never used for now.

It was the purpose of this PR #36

[jeffposnick]

@frlinw Thanks for that additional context—I'll take some action on that PR.

[jeffposnick]

#36 is merged, and included in the 2.3.0 release.

[jeffposnick]

Closing now that the 2.3.0 has the update to support all assets being included.

If you're running into trouble still, let us know.