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

1 Like
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.

1 Like
12

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

13

Perfect! Thank you once again for all your help!

14

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.