Unable to locate the font file in Vue

When using vue cli 3, I encountered an issue with a font file in my project. Specifically, I have a file named fonts.scss where I include the following code:

@font-face {
    font-family: 'ElMessiri';
    src: url('./fonts/ElMessiri/ElMessiri-VariableFont_wght.ttf') format(' truetype');
    font-weight: 700;
    font-style: normal;
  }
 

To use this font in components, I imported it like so:

<style lang="scss" scoped>
@import "../css/Main.scss";
 @import "../css/font.scss";
</style>

Despite the font file being available, I encountered the following error message:

  • @/fonts/ElMessiri/ElMessiri-VariableFont_wght.ttf in

Answer №1

After some investigation, I have discovered the issue. Simply switch out the term (url) in font-face with (local) and that should resolve it...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can be taken to ensure that events are triggered on the correct DIV element?

I am considering two different HTML structures for my project: <div id="threeJSContainer"> </div> <div id="UIControls"> <div ng-include src="'scripts/angular/UI.html'"></div> </div> When using the first c ...

Customize the appearance of the active head panel in the Bootstrap Accordion

How can I style the active position of the 'panel heading' like this: https://i.sstatic.net/75s2A.jpg I am looking to include a background color and font-weight for the active panel, as well as have the icon positioned downwards... Here is my cu ...

Tips for saving an image link when displaying an image in VueJS using the 'require' method

I am currently working on a project that involves displaying Pizza items with their respective images. Each Pizza object is stored in the database along with an imgUrl field. Strangely, the images are not showing up on the page, although I can see the alt ...

Tips for validating the required field in an input file using vee validate 3.0

<ValidationProvider name='file' rules="required"> <div slot-scope="{ errors }"> <input id="file" ref="file" type="file" placeholder="Upload file" class="form-control" name="file"/> <s ...

Guide to positioning a div at the bottom of a Drawer while maintaining the same width as the Drawer in React Material UI

Creating a Drawer on the right-hand side using <Drawer/>, I am trying to make a <div> stick to the bottom of the <Drawer />. The width of this <div> should match the width of the <Drawer />. Desired Outcome: https://i.sstati ...

What is causing the error to appear in the Android web-view when using vue.js?

During the development of my web app using Vue.js, I encountered a strange issue where everything was functioning correctly in desktop browsers but not on mobile devices. To troubleshoot this problem, I decided to install an Android emulator and use remote ...

Guide on utilizing flexbox to create a vertical stack of elements

I'm currently working on creating a layout similar to this: https://i.sstatic.net/eZurX.png To see my progress so far, check out: https://codepen.io/maketroli/pen/aaNezK Here is the code snippet I'm using: .product-descriptions { text-alig ...

No JavaScript needed for this CSS framework

I have been tasked with creating a website without the use of JavaScript, following very specific instructions. Furthermore, it must be compatible with iPhone and other mobile devices, while still adhering to the no JavaScript rule. I am open to utilizing ...

Can you simulate a line break without actually using a line break tag?

Could you please review the following code snippet: <span class="something"> <label>test1</label><br/> <label>test2</label><br/> <label>test3</label> </span> Instead of using <br& ...

generate notification within the Recipe Component

This is a project aimed at creating a recipe display site with various functionalities, such as creating recipes. However, I am facing an issue. I have a file named createRecipe.vue where I input the recipe data. How can I add an alert to this page that ...

Expanding space underneath for inline-block elements

Is there a way to create a page layout with inline-block elements that are vertically aligned to the top and fold into open space like floated elements do when placed below another set of inline block elements? It seems as though they follow row-like rules ...

Centering spans and divs is proving to be a challenge, as well as getting the margin-top and margin-bottom properties to function properly

I encounter this issue frequently, where my usual methods for centering objects do not seem to work. I am in search of a universal way to accomplish this task: <div> <span>content</span> <span> content</span> < ...

Refresh content on a stationary Nuxt website

I have experience building websites with Nuxt SSR, but I have yet to explore the static aspect. From my understanding, when building with Nuxt, all API calls are automatically executed and cached during build-time. If I want to create a blog using a stat ...

A guide on effectively mocking a Vuex store within the parentComponent of VueJS test-utils

I am currently using Jest in conjunction with vue-test-utils to test the reaction of a child component to an $emit event triggered by the parent component. The VueJS test-utils library offers a parentComponent option that can be utilized when mounting or ...

Require a v-alert notification to appear on every page, ensuring visibility across the site

Imagine a scenario where there is a right drawer that displays a grade dropdown with options like grade1, grade2, and grade3. On all pages, I need a v-alert notification strip to show the total count of students. For example, if I select grade3 from the ri ...

Performing a modulo operation within a v-for loop

I'm showcasing divs in a loop and I need to assign classes based on the loop index. My goal is to have index 0 and 1 with the class col-6, then indexes 2,3,4 with the class col-4, followed by index 5 and 6 having the class col-6, and so forth. This w ...

Trouble with Vue Resource configuration root not functioning properly

My goal is to avoid repeatedly typing the same URL by setting up the default URL. The following is the content of my main.js file: import Vue from 'vue' import App from './App.vue' import VueResource from 'vue-resource' Vue. ...

I'm curious to know where in the CSS specifications it is specified how multiple properties with the same name should be handled

While debugging an unrelated issue, I want to make sure I understand how a browser is supposed to handle a declaration like background-image: url(image0.jpg); background-image: image-set(url(image1.jpg) 1x, url(image2.jpg) 2x); I tried looking in the CSS ...

Tips for creating a completely responsive design

I am trying to make my page fully responsive without any scroll bar, but setting the height to 100% is not working. Below is the CSS code I have tried: html { height: 100%; width: 100%; } body{ width:100%; hight:100%; margin: 0; padding:0; } .ma ...

What is the best way to create a stylish outward curve effect for an active sidebar item using just CSS

After spending a week learning frontend designs, I attempted to replicate a design from Dribble. However, I've been struggling with recreating the active style on the sidebar due to the outward curve. If anyone could provide guidance on achieving thi ...