Preloading fonts using angular CLI

Question

EDIT: AFAIK This is not a duplicate of Webpack disable hashing of image name on output because:

• webpack.config is no longer editable in current angularCli versions.

• I want to keep the hash on the file names for cache busting.

I'm using Angular and I would like to preload my fonts, i tried using

  <link rel="preload" href="assets/someFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

However angular hashes my fonts during the build process, so my font will be copied to the root folder and renamed to look something like this.

myFont.e31fcf1885e371e19f57.woff2

and my @fontface reference will point to that font.

So in the end I'm actually loading the same font twice instead of preloading the font, since the browser sees different URLs

• /assets/myFont.woff2
• myFont.e31fcf1885e371e19f57.woff2

How can I preload the fonts and keep the hashing functionality (for cache-busting)?

Answer 1

Use an absolute path to your assets folder when defining the font, this will prevent hashing of the font file on deployment:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans'), local('OpenSans'), url('/assets/fonts/open-sans.woff') format('woff');
}

Then add a hard link to the font file in your index.html:

    ...
    <link rel="preload" href="/assets/fonts/open-sans.woff" as="font" crossorigin>
  </head>