Paths of least resistance: Absolute URLs for assets in CSS

What could be causing the absolute path for this asset (the font) not to work while the relative path does?

<body>
  hello friend
</body>
<style type="text/css">
  @font-face {
    font-family: 'Gilroy';
    /* src: url("../src/styles/assets/Gilroy.otf"); */
    src: local('Gilroy')
      url('/Users/username/dev-env/test-react/app/src/styles/assets/Gilroy.otf');
  }
  body {
    font-family: Gilroy;
  }
</style>

Edit: This issue appears to be related to React/Babel/Webpack. https://i.sstatic.net/GTgCW.png

Answer №1

You forgot to include a , after the local()

<style type="text/css">
  @font-face {
    font-family: 'Gilroy';
    src: local('Gilroy'),
      url('/Users/username/dev-env/test-react/app/src/styles/assets/Gilroy.otf');
  }
  body {
    font-family: Gilroy;
  }
</style>

For more information, check out this @font-face examples page.

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

Issues with webpack-dev-server auto-refreshing the browser

I am having trouble with getting webpack-dev-server to automatically refresh the browser. Every time I make a change, I need to terminate it in the command line and restart before the browser shows the updated content. This is my configuration for webpack: ...

Creating circular borders in CSS: A step-by-step guide

Is it possible to create a circular border in CSS? Currently, the shape is square but I would like it to be circular. color: white; left: 52px; position: absolute; top: 65px; padding: 3px; background-color: rgb(0, 195, 255); ...

I'm experiencing issues with using db.collection in Firebase with my Next.js application that utilizes useSession() from next-auth. Can anyone help me troub

Looking for up-to-date information on integrating Firebase with Next.js and Next-Auth. The answers I found on Stack Overflow are outdated and I'm facing challenges with Firebase's latest updates. I have Next.js set up with Next-Auth linked to Fa ...

What is the proper way to retrieve this stylesheet and add it to the header of my HTML file?

I want to utilize a style sheet from Wikipedia. However, when I fetch the style sheet and attempt to pass the URL retrieved through AJAX to the head of my HTML document, the URL behaves unexpectedly. Initially, I tried to use the fetched URL directly: var ...

Define two categories within the Attributes interface

To avoid theme-ui errors in the sx prop, I need to declare both of these statements: declare module "react" { interface Attributes { sx?: ThemeUIStyleObject; } } and declare module "react" { interface Attributes { sx?: Sx ...

Inject customized CSS following third-party plugin stylesheets in WordPress

I am currently exploring methods to incorporate a custom.css file after the loading of a third-party plugin. I am familiar with registering and enqueueing CSS files in functions.php. Is it possible to establish a dependency for the stylesheets of the thi ...

Using Props to Render Polylines on Google Maps Display

Below is the ReactJS code snippet to showcase a vehicle's movement on Google Maps. Within the code, latitude and longitude coordinates are hardcoded in the path array. I am looking for guidance on how to pass latitude and longitude coordinates to the ...

Troubleshooting issue: Failure in proper functionality of Jquery's slideDown

My form is divided into 3 sections, with the latter two initially hidden using CSS. When users click the next button in the first section, the second section is supposed to slide down into view. However, I'm experiencing an issue where the animation s ...

Issue with CSS animations not functioning correctly within React application

Currently in the process of creating a basic dice roller and aiming to incorporate a spin animation for added visual interest. Strangely, the animation only triggers on the first roll and not on subsequent attempts (unless I refresh the page). Here is the ...

Is there a conflict between bootstrap.min.JS and chart.min.js?

I have been working on developing an admin page for customer support and I recently added a visually appealing chart to display some data on the home screen. The chart integration was successful, but when I introduced tab panes to the page and refreshed ...

Prevent React js from showing Chrome pop-up blocked notifications

Our application functions in a way where, upon a user clicking on a link, a new browser tab is opened displaying a PDF (the PDF being a base64 stream sent from the server, functioning seamlessly). However, we have observed that in the production environmen ...

Updating the footer of a React application using Material UI Grid

Having some trouble customizing the footer in a React Material-UI grid. Refer to the image below for details. Any ideas on how to change the: 1 row selected? Thank you! ...

Is it possible to add additional text to an input field without modifying its existing value?

I have a numerical input field labeled "days" that I want to add the text " days" to without altering the actual numerical value displayed. <input type="number" class="days" (keyup)="valueChanged($event)"/> Users should only be able to edit the num ...

The use of callbacks is ineffective in addressing the asynchronous nature of

Hello everyone, I'm currently working on a weather app and I'm facing an issue with the asynchronous behavior of useState. I've come across some suggestions on Stack Overflow that using a callback in the useState function might solve the pro ...

Customizing the appearance of the browser's autocomplete feature as we input information into the form field

The image illustrates the issue of the background turning white when the browser autofills. However, I am seeking a solution similar to the transparent input below. ...

The page is being enhanced with FontAwesome Styles through React rendering

I have managed to successfully incorporate various FontAwesome icons into my React App. However, I am facing an issue where the raw CSS styles from FontAwesome are also being rendered at the top of my page. Upon inspecting my page, I noticed a style elemen ...

Issue encountered while attempting to compress tailwindcss

I attempted to reduce the size of my tailwindCSS by creating a script in my package.json: "tw:prod":"NODE_ENV=production npx tailwindcss-cli@latest build ./src/css/tailwind.css -o ./public/css/tailwind.css", However, I encountered the ...

Tips on how to align Material UI badge close to IconButton in ReactJS?

Can anyone help me with positioning the badge content next to the IconButton in Material UI? I attempted to disable the ripple effect, but it didn't resolve the issue! Here is my code snippet: <Badge badgeContent={4} color="primary" ...

Step-by-step guide to creating a transition effect when the input changes

I'm looking to add a unique effect to my dropdown menu My goal is to create an effect in which the placeholder moves up and the new value seamlessly takes its place, using JS, jQuery, CSS, and HTML. View before transition View after transition ...

Ensure that the context is used to effectively clear any existing data from the previous bar chart

I recently came across a cool codepen demo on this link. Upon clicking the first button followed by the second, the data transitions smoothly. However, there seems to be an issue where when hovering randomly over the bar charts at this source, the value ...