I'm currently working on my first Vue project and despite following various examples and the official documentation, I am struggling to resolve an issue regarding importing fonts locally in my project. https://i.sstatic.net/mXryH.png
Within my `
` tag, I am importing the font that I intend to use in the component. However, when referencing it, I encounter the error shown in the attached image.</p>
<pre><code>
<style scooped>
@font-face {
font-family: 'RalewayRegular';
src: local('RalewayRegular'),
url(../../fonts/Raleway-Regular.ttf) format('truetype');
font-style: normal;
}
body {
font-family: 'RalewayRegular';
}
.header {
display: flex;
justify-content: center;
align-items: baseline;
}
.menu {
list-style: none;
display: flex;
align-items: baseline;
}
.nav-item {
padding: 25px;
position: relative;
}
.nav-link:hover {
color: #666B74;
}
.menu-link-toggle {
cursor: pointer;
}
.dropdown-menu {
list-style: none;
position: absolute;
padding: 10px;
background-color: white;
width: max-content;
}
a {
font-size: 14px;
color: #D53865;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}
a:before {
content: '';
position: absolute;
width: 30%;
height: 3px;
bottom: 30%;
left: 35%;
background: #D53865;
visibility: hidden;
border-radius: 5px;
transform: scaleX(0);
transition: .25s linear;
}
a:hover:before,
a:focus:before {
visibility: visible;
transform: scaleX(1);
}
.added {
display: none;
}
</style>
If there is anyone experienced with Vue who can provide assistance and identify where I might be going wrong, I would greatly appreciate your time and help. Thank you in advance!