How to add local fonts to solution in Litium 8

Questions
1

Hi!

I would like to know how to add a local font to the solution.
I can see that the webpack.common.js differs from the one used in Litium 7 (where I can do it successfully), for example the function CopyWebpackPlugin seems to be missing.

So my question is how do I configure the webpack.common.js file so that we can host local fonts in our solution?

PS: There‘s no “fonts folder” in the wwwroot/ui folder either.

Litium version: 8.5.0

2

Fonts are copied when you use it. Declare it in fonts.scss:

/* underdog-regular - latin */
@font-face {
    font-family: 'Underdog';
    font-style: normal;
    font-weight: 400;
    src: url('../../fonts/underdog-v22-latin-regular.eot'); /* IE9 Compat Modes */
    src: 
         url('../../fonts/underdog-v22-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../../fonts/underdog-v22-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../../fonts/underdog-v22-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../../fonts/underdog-v22-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../../fonts/underdog-v22-latin-regular.svg#Underdog') format('svg'); /* Legacy iOS */
  }

Then use it in _variables.scss:

/* font-family */
$font-family: Underdog, Lato, Helvetica, Roboto, Arial, sans-serif;

In webpack.common.js you will find the code which bundle the fonts. More info of how webpack bundles assets: Asset Modules | webpack

3

I can also see that the fonts from my clients/fonts folder are being placed in the es6 folder in wwwroot/ui. Not sure if they are supposed to be there , but it feels out of place. They are placed there after a yarn build

4

The fonts are declared in the fonts.scss as usual but no fonts are being placed in the wwwroot/ui/fonts folder

5

I found out that it only works if i use type: ‘asset/inline’ instead of ‘asset/resource’. If I use the latter, I get an error in the browser stating the following:
“Not allowed to load local resource: file:///D:/ui/es6/f871baa12f2df527c345.ttf”

6

Can you try to upgrade resolve-url-loader package to the latest version, 5.0.0?

8

Hi Ton!
Thank you for your response, unfortunatly it didn’t work with the upgrade.
As soon as I have it as an assets/resource, all browsers complain that the local resource is not allowed. And what I find odd is that the url to the font file in this case goes to my local “D”-disc, not sure is this is the way it’s supposed to be.
I would also like to point out that this issue is present with every Litium 8 project we currently run, so the matter is quite urgent.
Thank you again for you continued support and help :slight_smile:

9

Delete package-lock.json and node_modules folder and try again

11

It worked! Thank you!! :slight_smile: What version comes with the accelerator? In our upgraded Litium 8 projects the version is 3.1.2.

12

I filed a bug to upgrade the package in default Accelerator.

13

Perfect! Thank you once again for all your help!