Tips for importing font files from the node_module directory (specifically otf files)

We cannot seem to retrieve the fonts file from the node module and are encountering this error message.

Can't find 'assets/fonts/roman.woff2' in 'C:\Projects\GIT2\newbusinessapp\projects\newbusinessapp\src'

Even though we have included assets in the angular.json file, we are still facing issues.

@font-face {
font-family: 'Publico Light Roman';
src: url('assets/fonts/roman.woff2');

}

          {
            "glob": "**/*",
            "input": "node_modules/@mypackage/assets/assets/fonts",
            "output": "/assets/fonts"
          },

If you have a solution, please share it here.

javascriptcssnode.jsangularsass

Answer №1

To solve the problem, I implemented the following solution:

@font-face {
font-family: 'Publico Light Roman';
src: url('~/assets/fonts/roman.woff2'); 
}

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

When working with an Angular application, IE9 may display the error message: "An internal error occurred in the Microsoft Internet extensions"

My application is encountering an issue in IE9: Error: A Microsoft Internet Extensions internal error has occurred. Error: Access is denied. When using IE's dev tools for debugging, the issue seems to be related to localStorage. if (localStorage) ...

javascriptangularjsinternet-explorer-9local-storageconsole.log

storing data in local storage using JavaScript

As someone new to coding, my aim is to create a basic "daily planner" page where users can input text on different lines. I've been attempting to use local storage for this task, but seem to be running into some issues. I've experimented with get ...

javascript

No content returned in skrill POST status response with node express

Is there a way to access the data sent in the post request to my status_url? Upon receiving a successful payment, I am getting a post request to the status_url as expected. However, I am finding that req.body, req.params, and req.query are all empty... I ...

node.jsexpressskrill

Keep an ongoing execution of a node.js file by sending an HTTP request repeatedly

I am working on a project using node.js and express where I have a file named TCPServer.js that is responsible for polling a TCP/IP server. The goal is to send a single HTTP request to a database, retrieve the IP Address and port number, and then utilize t ...

javascriptnode.jsexpresshttprequest

Vue warning: Issue encountered in created hook - Attempting to access property 'get' of an undefined variable is causing a TypeError

I encountered an error while using axios: [Vue warn]: Error in created hook: "TypeError: Cannot read property 'get' of undefined" export default { methods: { loadUsers(){ axios.get("api/user").then(data => ...

javascriptphplaravelvue.jsaxios

Calculator app with Next.js: Using keyboard input resets the current number state in real-time

While developing a basic calculator application with Next.js, I encountered an issue. The functionality works correctly when the user interacts with the HTML buttons, but when trying to input numbers using the keyboard, the state resets to 0 before display ...

javascriptreactjsnext.jsreact-hooksnext.js13

Utilizing Node and Express to Share Database Access Across all Subdirectory pages

Is there a more efficient way to make these two database collections available to all paths with the extension /auth? (E.g. /auth/opentickets, /auth/closedtickets, /auth/editdeveloper) I currently have to include this code in every event handler. Any sug ...

node.jsexpressroutesnode-mongodb-native

Can a screenshot of a YouTube video be printed exactly as it appears on a website?

Is there a way to print a page with an embedded YouTube video without it showing up as a blank area? I want the printed version to display the same still shot that appears on the web. If this isn't possible, I will use a noprint stylesheet. Here is ho ...

cssvideoprintingyoutubestylesheet

Execute an xmlhttprequest and then redirect to a different URL

I'm a beginner when it comes to AJAX and JavaScript. My goal is to first show a confirmation box, then send an XMLHttpRequest if confirmed. After that, I want to redirect the user to a new page. Below is my current code: <script type="text/javascr ...

phpjavascripthtmlxmlajax

Having trouble getting NPM environment variables to function properly on a Windows system?

I have a confusion in my package.json file where I am attempting to compile less code using versioning. Here is an example of what I am trying to achieve: "scripts" { ... "build:css": "lessc --source-map css/index.less build/$npm_package_name.$npm_package ...

javascriptjsonnode.jswindowsnpm

Express route fails to wait for Redis server response before moving on

How can I modify the code below to ensure that the res.json(...) command is not executed until all open calls to the Redis client.somecommand(..) have completed successfully? An issue occurs in the code where the client.hmset(uname, { ... } attempt to set ...

javascriptjsonnode.jsexpressredis

The correct method for including a CSS file in a Vue.js application

How can external CSS files be properly added in a Vue.js Application? I have come across multiple methods for adding CSS files in a Vue.js Application. One suggestion is to use the following code: <link rel="stylesheet" type="text/css" href="/static/b ...

javascriptcssvue.js

Effective ways to check for the time discrepancy between dates in moment.js

My server is set to use UTC date format and I am running my node server in UTC as well. I am looking to determine if the current time in Indian timezone (which is +5.30) is greater than 8AM, and if so, send an email notification. How can I achieve this u ...

javascriptnode.jstimezonemomentjs

Generate a Calendar Table using JavaScript in the Document Object Model (DOM

I have set up a table with 6 rows and 5 columns. The purpose of the table is to represent each month, which may have varying numbers of days. I want each column to display dates ranging from 1-30 or 1-31, depending on the specific month. Here's what ...

javascripthtmldom

Fuel Calculation - Unable to pinpoint the error

My JavaScript Code for Calculating CO2 Emissions I'm working on a program that calculates how much CO2 a person produces per kilometer. This is part of my school project and I'm still learning, so please bear with me... I also just signed up on ...

javascripthtmlbootstrap-4

Error: The operation 'join' cannot be performed on an undefined value within Fast2sms

I am encountering issues while attempting to send SMS using fast2sms in Node.js. The error message reads as follows: TypeError: Cannot read property 'join' of undefined at Object.sendMessage (C:\Users\user\Desktop\node_module ...

javascriptnode.jsexpress

generating the <tr> element within a loop

I've been working on creating a calendar, but I'm facing an issue with the way the days are laid out horizontally. Here's how it currently looks: https://i.sstatic.net/PWcCi.png As you can see, only the <td> tags have been created. I ...

phpcss

What is the method for verifying a particular field in a MongoDB document with the use of Express and Passportjs?

I am currently working on a NodeJS Web application with various modules such as express, mongoose, and passportjs. Within my database, I have two types of users: regular Users and Admins, each with their own respective collection. User Admin After succe ...

node.jsexpressmongoosepassport.jsexpress-session

What steps do I need to take to make this JavaScript code function properly? How can I create a carbon copy email setup in

Recently, I've been struggling to implement this particular code on my website as I am not very proficient in JavaScript. Despite searching for various online resources, none of them seem to address my issue. This code is meant to be a part of a form ...

javascripthtml

Exploring nested JSON objects within an array using ngFor directive

My application uses Angular 6 and Firebase. I am trying to showcase a list of all appointments. Below is my approach: service.ts getRDV() { this.rdvList = this.firebase.list('/rdv'); return this.rdvList; } Model: export class RDV { key: ...

angulartypescriptfirebasefirebase-realtime-database