Currently, I am working on incorporating a Google font into my project.
This is the desired outcome:
https://i.sstatic.net/jIO7q.png
However, the actual result is different:
https://i.sstatic.net/V2KhW.png
The code snippet in App.vue looks like this:
<template>
<div id="app">Luckiest Guy</div>
</template>
<script>
export default {
name: "App",
};
</script>
<style scoped lang="scss">
@import "./assets/scss/main.scss";
#app {
font-family: "Luckiest Guy", "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
In the main.scss file, I import the fonts using the following line:
@import '../fonts/fonts.scss';
The contents of fonts.scss include:
@font-face {
font-family: 'Luckiest Guy';
src: url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
}
If you want to take a look at the entire setup, here is the link to the Codesandbox:
https://codesandbox.io/s/dazzling-frost-2mbuf?file=/src/App.vue
Update 1
I have also attempted to use a downloaded otf file, but it has not been successful.
My updated fonts.scss now includes:
@font-face {
font-family: 'Luckiest Guy';
src: url('<The relative path of the otf>');
}
Update 2
Another attempt with a downloaded otf file:
@font-face { font-family: 'Luckiest Guy'; src: url('./LuckiestGuy-Regular.ttf'); }
To view the latest changes, you can visit the Codesandbox link:
https://codesandbox.io/s/dazzling-frost-2mbuf?file=/src/assets/fonts/fonts.scss