Unable to find and load the specified css-font formats (svg, eot, woff, woff2, and ttf) using webpack

Looking to incorporate a unique font into my project:

@font-face {
  font-family: 'bikeshop';
  src: url('/src/styles/bikeFont/font/bikeshop.eot?37006833');
  src: url('/src/styles/bikeFont/font/bikeshop.eot?37006833#iefix') format('embedded-opentype'),
       url('/src/styles/bikeFont/font/bikeshop.woff2?37006833') format('woff2'),
       url('/src/styles/bikeFont/font/bikeshop.woff?37006833') format('woff'),
       url('/src/styles/bikeFont/font/bikeshop.ttf?37006833') format('truetype'),
       url('/src/styles/bikeFont/font/bikeshop.svg?37006833#bikeshop') format('svg');
  font-weight: normal;
  font-style: normal;
}

While compiling via "npm run server", the fonticons are not displaying on the website.

The console is showing these errors:

GET "domain"/src/styles/bikeFont/font/bikeshop.woff2?37006833   
File: shared_styles_host.js:90   
GET "domain"/src/styles/bikeFont/font/bikeshop.woff?37006833  
File: src/styles/bikeFont/font/bikeshop.woff?37006833:1 
GET "domain"/src/styles/bikeFont/font/bikeshop.ttf?37006833  
File: src/styles/bikeFont/font/bikeshop.ttf?37006833:1

Do I need to add a new loader for this in my webpack.common.js configuration?

Edit:

I have included the @font-face in my scss-file and using the following webpack rule for it

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
},
cssangularsvgwebpackwebpack-2

Answer №1

Combine the css-loader with either the file-loader or url-loader. Here's an example:

{
  module: {
    rules: [{
      test: /\.css$/,
      loader: 'css-loader'
    }, {
      test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
      loader: 'url-loader',
      options: {
        limit: 10000
      }
    }]
  }
}

Answer №2

To process fonts and images in your css using webpack, consider utilizing simon04's solution.

If you prefer to solely use webpack for handling css and disregard all url paths within your css files (thus managing the referenced assets on your own), you can simply disable the url option on the css-loader like so:

{
    test: /\.css$/,
    use: {
        loader: 'css-loader',
        options: { url: false }
    }
}

For more information, visit https://github.com/webpack/css-loader#options-1

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

Mystery of the Unresponsive MD Ripple Button

While working on creating a CSS button, I wanted to incorporate the Material Design ripple or wave effect into it. I came across a simple script on codepen that works well by adding the class "ripple" to various elements such as divs, buttons, images, and ...

javascriptjqueryhtmlcssmaterial-design

Incorporating JSON data into data-groups within an Ionic application

I am currently working on developing an Ionic app using the newest version (Ionic 3xx and Angular 5) and I am attempting to incorporate the shuffleJS feature for filtering. Everything was working fine when I used static data in my template with the 'd ...

jsonhtmlangularionic-framework

Hovering over an SVG icon will trigger an animation

I am trying to achieve an animated effect on an SVG line icon only when it is hovered over. I want the icon to remain static when not being hovered. While I have managed to animate the drawing effect and make it work somewhat on hover, I am facing an issue ...

htmlcssanimationsvg

Is there a way to apply a class to the main div once the checkbox has been clicked?

Whenever the checkbox is checked, it should add a class to the main div. Additionally, if I try to check another checkbox, the previously checked one should have its class removed and the new one should have the class added. Here is the code snippet for r ...

htmljquerycss

Issues with keyboard accessibility in drop down menus

Looking to improve the keyboard accessibility of my menu bar. Swapped out all instances of :hover with :focus, but unfortunately dropdown menus are still not accessible via keyboard. Does anyone have a solution for this issue? Appreciate any help! ...

htmlcssaccessibility

Learn the steps to dynamically show a navbar component upon logging in without the need to refresh the page using Angular 12

After logging in successfully, I want to display a navbar on my landing page. Currently, the navbar only shows up if I reload the entire page after logging in. There must be a better way to achieve this without a full page reload. app.component.html <a ...

javascriptangulartypescriptrxjs

Compile time error due to TypeScript enumeration equality issue

Currently, I am developing a system to manage user roles within my website using TypeScript enumeration. This will allow me to restrict access to certain parts of the site based on the user's role. The primary challenge I am facing is comparing the u ...

angulartypescriptenums

item uploaded via internet not restricted

Recently delving into Angular2, I am currently engrossed in constructing a basic application that showcases a list of objects. My goal is to click on one object and delve into a detailed view of it. However, while attempting to access the properties of the ...

angular

Disabling an Angular MSal route guard based on the environment variable's condition

My routing module is set up with MsalGuard to require authentication for child routes. While this works, I want to disable MsalGuard based on an environment variable when testing locally. How can I achieve this? I attempted using canDeactivate on my rout ...

angularazure-ad-msalauth-guard

What is the best way to use CSS 3 to resize and enlarge an image, such as sprite icons?

Hello everyone, Picture this: a sprite image named icons.png linked to the css class .icons, featuring various 10x10px graphics. Now imagine needing another class that enlarges these sprite graphics exactly twice their size, making them 20x20 pixels on the ...

resizecsssizebackground-image

Solving the CSS Trick: Responsive Data Table (featuring inline editing) Display Glitch

In my quest to create a responsive table with inline editing, I turned to Chris's guide at CSS-Tricks (check it out here). To see how it all comes together, take a look at this Plunker demo. On mobile screens, the responsiveness is on point. https: ...

htmlcssangularjsdatatableresponsive-design

Is it possible to apply the box-shadow effect only to the left and right sides of a div?

Looking to achieve a box shadow effect on just the left and right sides of a div? box-shadow: 0px 0 20px rgba(0,0,0,.4); I experimented with variations like: box-shadow: 0, foo, 0, foo; but it did not yield the desired results. In the illustration bel ...

htmlcss

Implementing event handling with .On() in Jquery following .Off()

I need assistance with my responsive navigation bar. I am having trouble with the jQuery code to disable hover events if the width is less than or equal to 768px and enable it for desktop screens. $(window).on('load resize', function (e) { v ...

javascriptjquerycssunbind

What steps should I follow to ensure that the processData function waits for the data returned by the getData function in Angular?

After calling the getData function, each object is stored in an array and returned. Now I need the processData function to await these results from getData and then further process them. However, when I try to console.log(cleaningData), I don't see an ...

javascriptangularasynchronousobservable

Using HTML and JavaScript, we can set two different color values - one for the background and one for the h1 title

I am trying to save two values, one for the h1 tag and one for the body background. I want the user to select color 1 and color 2. When I press the third button, all changes should be applied and the colors should change. I have attempted this but with no ...

javascripthtmlcss

Enclose Words Inside Unconventional Outline

Place text within a uniquely shaped border… I am attempting to achieve this goal in the most responsive and backward compatible way possible. I understand that compromise may be necessary. I have made progress with the help of this thread, but the svg ...

css

Exploring the concept of union types and typeguards in TypeScript

I'm struggling with this code snippet: function test(): any[] | string { return [1,2] } let obj: any[] = test(); When I try to run it in vscode, I get the following error message: [ts] Type 'string | any[]' is not assignable to type & ...

javascriptangulartypescripttypes

To determine the class of an element and reveal its parent if the class is present

Typically, the parent element remains hidden by default. However, upon clicking a specific element, its child might gain a class called "selected". How can I check for this class and then display the entire list if it is present? <ul style="display: ...

jquerycss

What is the method for initiating a radial gradient from the middle of the pie chart?

In my pie chart with grid lines, I have successfully implemented a radial gradient. However, the issue is that there is a separate gradient for each pie slice. What I really want is a single gradient originating from the center of the entire pie chart. I ...

javascriptcssd3.js

Step-by-step guide on how to superimpose a Glyphicon on

I'm struggling to figure out how to overlay a Glyphicon (.glyphicon-zoom-in) on top of a Bootstrap .img-thumbnail. The specific CSS rule I've been using is content:"\e015"; ...

htmlcss