How to Load Local Fonts with Vue CLI 4 in Vue 3

Using local fonts in our Vue projects can be a little tricky. Especially with the webpack compatibility issues with sass-loader.

In this post we’re going to learn how to use our local fonts in our Vue 3 application using Vue CLI 4.

Before we move on, make sure to install Node.js on your system. Vue CLI 4 requires version 8.9 or above.

Installing Vue CLI 4

Run the command below to install Vue CLI 4 globally.

npm install -g @vue/cli

Creating our Vue App

When Vue CLI 4 installation is finished, create a project called my-app. ( or whatever you prefer. )

vue create my-app

• Select Manually select features preset

• Deselect Linter / Formatter option ( you can use spacebar to deselect it )

• Choose Vue 3.x as a version

• Select your config to place in In dedicated config files

• For the last step, select No and continue.

After your setup is complete you can go to your project folder, and type npm run serve to preview the Vue app.

http://localhost:8080/

Folder Structure of the Project

After our application is alive and running, we can now create subfolders ( under the assets folder ) for font and styling files.

Importing Local Fonts Into scss File

To load our fonts we are using @font-face at-rule .

fonts.scss

@font-face {
  font-family: 'Karla-Regular';
  src: local('Karla-Regular'), url('~@/assets/fonts/Karla-Regular.ttf') format("truetype");
}

@font-face {
  font-family: 'Karla-Bold';
  src: local('Karla-Bold'), url('~@/assets/fonts/Karla-Bold.ttf') format("truetype");
}

To give a brief explanation:

• Using font family property we are setting a name for the font itself.

• local() function searches user’s computer if there’s a local font with the name provided. If there’s a match, that local font is used. If not, it looks for the resource specified in url() function.

• In the url() function we provide a path for our local fonts, @ symbol is a reference to src/ folder.

• Lastly, we are defining a format type in format(). Other available formats are, woff, woff2, opentype, embedded-opentype, and svg.

Installing sass and sass-loader

As default, Vue CLI 4 uses webpack 4 as a webpack version, which has compatibility issues with the latest sass-loader version. To work around that, we are going to install specific version of the sass-loader. You can also check the docs for this issue.

npm install -D sass-loader@^10 sass

Creating vue.config.js File

With the help of vue.config.js file we can use our variables, mixins, fonts etc. all across our components. That way, we don’t have to manually import necessary features into every single component.

Now, let’s create one in the root folder of our application.

Configuring vue.config.js File

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/assets/scss/fonts.scss";`
      }
    }
  }
}

Here, we set the internal configuration for the webpack loader, and loaded our fonts.scss file globally. That way, we can access it from each component in the application.

Using Local Fonts in Vue Component

In App.vue component our current styling is like this.

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

</style>

By adding lang="scss" attribute to style tag, we can now use our fonts as below.

We can also create separate scss file to use our fonts. Both is going to work.

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1 {
  font-family: 'Karla-Bold';
  font-size: 40px;
  color: #9403fc;
}

h3 {
  font-family: 'Karla-Regular';
  font-size: 30px;
  color: #07c9e3;
}
</style>

Here’s the End Result

After applying our styles, we now can see that our fonts are applied to h1 and h3 elements. ( Make sure to restart your local server to see the changes. )

Conclusion

By configuring css.loaderOptions option in vue.config.js file we can use our shared styles throughout our application. It saves us from repeated work.