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)?

If I understand correctly That answer asumes I have control over webpack.config, I dont. AngularCLI no longer provides it.@jcuypers — Joaquin Brandan, Mar 01 '19 at 19:56
I disagree, this is not a duplicate question. It is a different and unique question. Just because the solution *might* be the same, it doesn't make it a duplicate. @jcuypers — Narm, Mar 01 '19 at 20:12
ok fair enough. Anyway I didnt fiddle around with it enough in order to be of assistance. having said that i partly remember i was in the same webpack missing story and go to something like an alternate build system to allows for changes: ngx-build-plus https://github.com/manfredsteyer/ngx-build-plus . maybe this can help you — jcuypers, Mar 01 '19 at 20:18
not really. I ended up using fonts in CDNs rather than using local ones. — Joaquin Brandan, May 21 '19 at 17:35

score 8 · Answer 1 · answered Apr 16 '20 at 18:05

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>

score 0 · Answer 2 · answered Aug 05 '19 at 22:51

0

To prevent hashing of font files in the asset folder, you have to include the assets in your angular.json like following:

"assets": [{
            "glob": "**/*",
            "input": "src/assets",
            "output": "assets"
          }]

instead of

"assets": ["src/assets"]

answered Aug 05 '19 at 22:51

servrox

239
3
9

This does not appear to work for `ionic build --prod`. – Dan Jan 02 '20 at 17:11
This is my current setup, but that's not what im asking (unless there's something im not seeing). "How can I preload the fonts and keep the hashing functionality (for cache-busting)?" – Joaquin Brandan Apr 19 '20 at 18:59

score -1 · Answer 3 · answered Mar 07 '19 at 17:51

-1

I was helped by the following actions. Transfer fonts files to assets folder. In styles set absolute path to fonts.

@font-face {
    font-family: 'CoreSans';
    font-style: normal;
    src: url('/assets/fonts/CoreSans.woff') format('woff');
}

answered Mar 07 '19 at 17:51

Maksim Sentiabov

1

3

This is my current setup, but I want to also preload the fonts, not just use them. – Joaquin Brandan Mar 07 '19 at 19:15

Preloading fonts using angular CLI

3 Answers3

Linked