Stumbled upon this interesting plugin at https://github.com/gabiseabra/google-fonts-webpack-plugin
After updating the babel.config.js file from the starter kit:
const GoogleFontsPlugin = require('google-fonts-webpack-plugin')
module.exports = {
presets: [
'@vue/app',
],
plugins: [
new GoogleFontsPlugin({
fonts: [
{ family: 'Inconsolata' },
{ family: 'Oswald' },
],
/* ...options */
}),
],
};
Added the font to the #app class
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<style lang="scss">
#app {
font-family: 'Inconsolata', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
However, even after these changes, the font remains Arial: