Using custom font after the system built

[MrJoeXu]

I used a custom font locally and load them according to this commit. It works well inside the doc.

But once I did npm run build:system and install the design system as a seperate npm module in my main app, the custom font wasn't loaded in any of the design-system's component. Is this a known limitation of the system, or is there some extra steps I have to follow?

[arielsalminen]

@MrJoeXu It isn’t really a limitation. The static assets just aren’t copied by default when running build:system.

I modified that example branch a little and added a little more functionality. See this commit: https://github.com/viljamis/vue-design-system/commit/e7eea29327b54520df8c8eaca26294f52d4159de

With those changes, you can run npm run build:system and it’ll copy the fonts over as well. Once the build is complete and you’ve NPM installed the new version, you just need to make sure to import the fonts correctly in your projects. So for example importing the fonts in your main.js:

import system from 'vue-design-system'
import 'vue-design-system/dist/system/system.css';
import 'vue-design-system/dist/system/fonts/fonts.css';
Vue.use(system)

And making sure that your Webpack config has the necessary rules to load font files (you might already have something like this, but if not, Webpack will throw you an error):

{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: "file-loader",
    options: {
        limit: 10000,
    },
}

[arielsalminen]

@MrJoeXu I’ve release a new version (2.1.4) where the static assets are now copied by default too when building lib. If you already did those changes, no need update though.