Adding local font to Litium 7

[MariliaBognandi]

Has anyone managed to add a local font successfully?

I’ve added font files to UI/fonts and defined them in fonts.scss, and it works on the site locally. But on the dev site the new font isn’t visible. When I inspect I can see that no new font files have been loaded.

Litium version: 7.2.0

[ton.nguyen]

UI folder is the build output folder and you should not put files there manually. The webpack build step will produce files in that folder.

To add fonts, please create a folder /Client/fonts then place font files there.
Then modify /Client/webpack/webpack.common.js to copy font files when building, by modifying CopyWebpackPlugin config:

from

        new CopyWebpackPlugin([
            { from: 'images', to: path.resolve(BUILD_DIR, 'images') }
        ]),

to

        new CopyWebpackPlugin([
            { from: 'images', to: path.resolve(BUILD_DIR, 'images') },
            { from: 'fonts', to: path.resolve(BUILD_DIR, 'fonts') }
        ]),

Make sure your fonts.scss files has the correct Url to files under /UI/fonts/ folder. Now when executing yarn build or yarn prod, files under /Client/fonts/ will be copied to /UI/fonts/

[MariliaBognandi]

Thanks for your answer Ton, however it’s still not working.

I’ve added my fonts here:

Defined them in fonts.scss:

But when I inspect in the browser it looks like there’s no font folder:

I also changed the CopyWebpackPlugin like you suggested:

What am I missing here?

[NilsN]

Did you build the client project?

Navigate to the Litium.Accelerator.Mvc folder and execute yarn run prod

[MariliaBognandi]

Yes, any other ideas?

[NilsN]

Try changing format('ttf') to format('truetype')

I tested this locally and it works fine:

/* custom */
@font-face {
    font-family: 'Lobster Regular';
    font-style: normal;
    font-weight: 400;
    src: local('Lobster Regular'), 
	url('/ui/fonts/Lobster-Regular.ttf') format('truetype');
}