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

Error encountered: `unexpected token within ES6 map() function`

Do you see any issues with this code snippet? render(){ return ( var users= this.state.users.map(user => <li key={user.id}>{user.name}</li> ) <ul>{users}</ul> ) } I am receiving an error mes ...

javascriptreactjsecmascript-6

How can I ensure that Div and its contents are only responsive to changes in width?

Initially, I'm feeling a bit confused but I'll try my best to articulate my issue and what I need. Within a div element, there's another div that I want to move left and right only, following the same path as an image when resizing (refer t ...

htmlcss

The width of the HTML page seems to adjust or shift when I click on

I'm encountering an issue with my navbar. Whenever I open the dropdown menu, the width of my page changes but returns to normal when it is closed. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="styl ...

htmlcsstwitter-bootstrapbootstrap-4

Adjust the global node variable during execution

Currently seeking a solution to dynamically change the logging level of my node application during runtime based on the load of my cassandra servers or as needed. One approach I am considering is creating an endpoint through Express route to modify this va ...

node.jsexpressnpm

The impact of Next.js state size on performance and delays in updating state performance

When dealing with large data sets in Next.js, such as saving 50mb of data to the state, I have noticed a significant decrease in state update speed, negatively impacting site performance. I have been searching for a solution for the past two days. Any su ...

node.jsreactjsnext.jsfilesizestate-management

New techniques in VueJS 3: managing value changes without using watchers

I am currently working on coding a table with pagination components and I have implemented multiple v-models along with the use of watch on these variables to fetch data. Whenever the perPage value is updated, I need to reset the page value to 1. However, ...

javascriptvue.jswatch

Designing a unique and customized theme for Angular 4

Exploring the world of Angular 4 and Angular Material is an exciting journey for me. Currently, I am delving into the creation of a custom theme in Angular 4. In order to achieve this, we make use of variables to assign colors to primary, accent, and warn ...

angularangular-material2custom-theme

Is it possible to serve CSS using relative paths that go beyond the URL root?

I've encountered a file path issue with my HTML and CSS files. My HTML file is located in: src/test/html/index.html And the corresponding CSS file is in: src/test/css/index.css In the HTML file, the CSS is linked using: <link rel="stylesheet" ...

htmlcssbrowsercross-browser

How can one manage styling choices in R Markdown while creating a PDF document?

Currently, I am utilizing R Markdown within the RStudio platform to produce documentation. When selecting the "Knit HTML" option, my output appears satisfactory. The ability to modify styling options and apply CSS Files directly is a beneficial feature. ...

htmlcssrpdfrstudio

When aligning to the right, input box does not wrap

Is there a way to prevent an input box from displaying on a lower line than the menu when using CSS to create a one line menu floated to the right? This is the CSS code being used: <style type="text/css"> #nav { margin:0; padding:0; lis ...

csshtmlcss-float

Develop a monitor for an entity that has not been created

Currently, I am tackling a feature that involves tracking an asynchronous request within a synchronous one. Let me elaborate. The code snippet I am working with looks something like this: const myObj = {}; function sendMessage(requestId, data) { kafkaP ...

javascriptpromise

Unusual spacing issue observed between <div> elements on Internet Explorer, but not on Firefox or Opera

I am facing a common question that many others may have asked before, but I haven't been able to find a solution to my specific issue. When viewing my website on FF, Opera, and IE on Windows 7, everything displays correctly. However, when using IE7 o ...

htmlcssinternet-explorer

Encountering a socket hang up error during the creation of a React Native project can be frustrating, especially when

I've been encountering an issue when setting up a react-native project on my Mac. The problem arises while installing the node-pre-gyp module. Even after attempting to install node-pre-gyp globally, I continue to face the same error. ➜ mobile reac ...

node.jsreactjsreact-nativenpm

Revolutionizing Interaction: Unveiling the Power of Bootstrap 3

Would you be able to assist me in customizing buttons to resemble a typical dropdown link? <div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">Dropdown <span class="caret"&g ...

csstwitter-bootstraptwitter-bootstrap-3

The function to navigate, 'navTo', is not defined and so it cannot be read

I am trying to create a navigation button in my SAPUI5 application deployed on Fiori _onPageNavButtonPress: function () { var oHistory = History.getInstance(); var sPreviousHash = oHistory.getPreviousHash(); if (sPreviousHash !== ...

javascriptsapui5sap-fiori

Learn how to dynamically chain where conditions in Firebase without prior knowledge of how many conditions will be added

Currently, I am working on a project using Angular and firebase. My goal is to develop a function that can take two arguments - a string and an object, then return an Observable containing filtered data based on the key-value pairs in the object for a spe ...

javascriptangularfirebasegoogle-cloud-firestore

Can you guide me on how to export a named function using module.exports?

I have a script file for my discord bot that includes a specific command and a function with parsing logic that I want to reuse in my main index.js // File: ./commands/scrumPrompt.js // The function const extractDeets = function (f, scrum) { let items ...

javascriptnode.jsexpressdiscord.js

Retrieve information using AJAX via POST method

I find myself in a bit of a pickle at the moment. I've been researching for hours, and I still can't seem to figure out this seemingly basic issue. It would be greatly appreciated if someone could offer me some quick advice. So here's my dil ...

javascriptc#ajaxrest

Building interactive chat "hubs" with Node, Express, Heroku, and Socket.io

As I've been working on my app for a while now, scalability issues have started to arise. With my limited experience in Node and Heroku, I'm reaching out for some guidance. Initially, I followed this tutorial to set up my node service, essential ...

iosnode.jsexpressherokusocket.io

Customizing the sizes of HTML components (h1, h2, h3, etc.) with Tailwindcss for both desktop and mobile platforms

Currently, I am working on a project using Tailwind CSS and Next.js. I want to customize the font size of h1 element from 40px to 46px for desktop screens (1440px) and then adjust it to 30px for mobile web (375px). I attempted to add a new property in the ...

cssnext.jstailwind-css