Angular 10 is displaying a message indicating that a font has not been

I'm facing an error in my Angular project when trying to add a font to the SCSS file. How can I resolve this issue?

style.scss:

@import "~@angular/material/theming";
@include mat-core();
$PWP-primary: mat-palette($mat-indigo);
$PWP-accent: mat-palette($mat-pink, A200, A100, A400);
$PWP-warn: mat-palette($mat-red);
$PWP-theme: mat-light-theme($PWP-primary, $PWP-accent, $PWP-warn);
@include angular-material-theme($PWP-theme);


@import "~bootstrap/dist/css/bootstrap.css";
@import './variables.scss';
html,body {
    height: 100%;
}
body {
    margin: 0;
    font-family: $font-vazir-bold;
    direction: rtl;
}

variables.scss:

   $font-vazir-bold:"Vazir";
    @font-face {
        font-family: Vazir;
        src: url("../assets/font/vazir-font-v27.2.0/Vazir-Bold.eot");
        src: url("../assets/font/vazir-font-v27.2.0/Vazir-Black.ttf") format("ttf");
    }

In the angular.json file, I made changes to the path of the style.scss file.

angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  ...

package.json:

{
  "name": "pwp",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    ...

Error in console:

Failed to compile.

./src/app/layout/home/home.component.scss
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: E:\project\PwpEnd\PWP\src\scss\variables.scss:5:4:
...

Any suggestions on how to address this issue?

View image description here

Answer №1

Give this a shot

   @font-face {
        font-family: Vazir;
        src: url("~/assets/font/vazir-font-v27.2.0/Vazir-Bold.eot");
        src: url("~/assets/font/vazir-font-v27.2.0/Vazir-Black.ttf") format("ttf");
    }

Solution found at https://github.com/angular/angular-cli/issues/6599 I encountered the same issue and this method worked for me

Answer №2

To specify the location of the images, it is necessary to provide the address starting from the root directory

$font-vazir-bold:"Vazir";
    @font-face {
        font-family: Vazir;
        src: url("src/assets/font/vazir-font-v27.2.0/Vazir-Bold.eot");
        src: url("src/assets/font/vazir-font-v27.2.0/Vazir-Black.ttf") format("ttf");
    }

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

Arrange containers into a tower?

Currently, I am exploring the concept of stacking boxes. While I have a solid grasp on how to stack them vertically from top to bottom, I find myself puzzled about how to stack them horizontally. Check out my vertical stacking method here See how I a ...

What is the best way to show HTML code on a REACT website without disrupting the existing styles?

I am trying to showcase the following code in a REACT webpage, but it is not displaying as code. Instead, it is showing as actual elements. How can I display the button codes below as actual code? <code> <pre> <Button className='btn-grv ...

Item floating in a list

I'm facing a challenging issue that I need help with. It's a bit complicated to explain, but I'll do my best. There's also a picture included to help illustrate the problem. The problem I have is with an ordered list. When the next row ...

Getting a precise item in JSON with varied key signatures

Given the following JSON data: var responses = {customer : {results: 2938; id: 9283}, bredesh : {results: 2938; id: 248} }; I am trying to use an if statement in my HTML template : <div ng-if="response.(customer and bredesh and any new element (Is ...

Unable to send event from JavaScript to Component in Ionic

My goal is to notify a component that a script file has finished loading. My approach involves using the onload event of an element to dispatch an event. A service will then register an event listener for this event, waiting for clients to subscribe to an ...

Generating interactive forms in Angular 7 using API data

I have developed a component that generates dynamic forms using angular reactive forms. When I attempt to utilize this component to create form fields in another component based on the response from my API, the form appears disabled and I am unable to make ...

Tips for setting discrete mapper style in cytoscapejs?

Currently, I am defining the style of cytoscape.js through CSS and converting it to JSON format using this resource. My goal is to implement a discrete mapper for styling. It's similar to the scenario discussed in How to use a descreteMapper like on c ...

Having trouble locating the source of the issue causing the product page to appear too wide on Shopify

Can someone assist me in identifying the issue that is causing the product page on this website () to be too wide? Here is an image highlighting the issue. I made some CSS customizations to make the product gallery full width and added padding to the pro ...

The bidirectional data binding between two components is only functioning for the initial letter

Encountering a peculiar error that I have been researching with no luck in finding a solution. Most of the related findings are outdated and ineffective. Error Message An error is triggered when two-way binding to a property: 'Expression has chang ...

Injection of environmental variables into app services

Through the use of Nx, I have created multiple apps that each have their own environment with different API URLs. The Nx Workspace library includes shared services that are utilized among all apps, however, it is necessary to pass the environment-api-url w ...

Enable wp_star_rating for display on the front end

My goal is to incorporate the wp_star_rating function into a shortcode for use on the frontend of my WordPress website. To achieve this, I have copied the code from wp-admin/includes/template.php to wp-content/themes/hemingway/functions.php. I have includ ...

Generate barcodes using Angular 2

Can anyone point me in the direction of an Angular 2 Barcode Generator capable of creating code 128 barcodes? I've been searching but haven't had any luck finding one. If you have any suggestions or can offer assistance, it would be greatly appr ...

Having difficulty with CSS animation and background issues

I can't seem to get my rotating background to work using CSS keyframe animation. I've tried different things but can't figure out what's going wrong. Below is my code: .main-header { width: 100%; Height: 128px; } .main-header, ...

Tips for controlling the placement of divs on a webpage

I need to align 3 divs in a specific way on my webpage. One should be on the left side taking up 25% of the window, one on the right side also taking up 25%, and the last one in the center taking up the remaining space. I'm struggling with how to achi ...

RXJS buffering with intermittent intervals

Situation: I am receiving audio data as an array and need to play it in sequence. The data is coming in continuously, so I am using an observable to handle it. Since the data arrives faster than it can be played, I want to use a buffer to store the data w ...

Unveiling the intricacies of CSS specificity

Struggling with the specificity of this particular CSS rule. Despite researching extensively, I still can't seem to grasp it. Can someone help me determine the specificity of the following: #sidebar h1, p em, p a:hover{ ... } ...

Testing the open dialog with a unit test case

I encountered an issue while writing a unit test case for the open dialog feature in Angular 7. A TypeError is being thrown: "Cannot read property 'debugElement' of undefined." I am seeking assistance from anyone who can help me troubleshoot this ...

"Enhance your user experience with dual notifications using the Angular2-to

Whenever I utilize the angular2-toaster packages, I find myself receiving duplicate notifications. Below is an example showcasing the usage of this package. I am unsure why this issue occurs, but I have noticed that simply reloading my angular2 applicatio ...

Conditional Dependencies

I'm trying to inject a dependency using @Inject() and I want it to be optional. However, the @Optional() tag doesn't seem to work with this particular type of dependency. According to documentation, the syntax for an optional injection with @Inje ...

Angular does not automatically cancel a wrapped HTTP Request when unsubscribing

Update: The reason for not using the built-in HttpClient and instead opting to use our own HttpService is because we need to intercept the response. Our custom HttpService wraps the Angular provided HttpClient to apply headers, authorizations, and perform ...