[SCSS] I am experiencing difficulties with loading fonts on my machine/browser, while they are functioning normally on other devices

When using relative paths, fonts may not load properly. However, absolute paths seem to work without any issues.

//styles.scss
@font-face {
  font-family: 'Roboto-Bold';
  src: url('../fonts/Roboto-Bold.ttf');
}

@font-face {
  font-family: 'Roboto-Medium';
  src: url('../fonts/Roboto-Medium.ttf');
}

@font-face {
  font-family: 'Roboto-Regular';
  src: url('../fonts/Roboto-Regular.ttf');
}

Although the above code functions correctly on other systems, it shows a 404 resource not found error on all browsers on my machine. To resolve this issue, I modified the paths to:

//styles.scss
@font-face {
  font-family: 'Roboto-Bold';
  src: url('./src/assets/fonts/Roboto-Bold.ttf');
}

@font-face {
  font-family: 'Roboto-Medium';
  src: url('./src/assets/fonts/Roboto-Medium.ttf');
}

@font-face {
  font-family: 'Roboto-Regular';
  src: url('./src/assets/fonts/Roboto-Regular.ttf');
}

After making these changes, the fonts loaded properly on my local machine, but failed to do so on others. Any insights into why my machine is behaving differently?

I conducted various checks, including verifying the font file integrity and adjusting the paths, but none of these attempts were successful.

UPDATE:

server: {
port: 8000,
strictPort: true,
host: true,
origin: 'http://127.0.0.1:8000'}

By altering the origin in vite.config.ts from to 127.0.0.1, the issue was resolved. However, the reason why it works for others and not for me remains unclear.

Answer №1

When it comes to folder structure, ".." represents the father folder and "." represents the folder itself. Note that when using absolute addressing, you cannot use a dot.

For those working with React, it is possible to set up your application to allow for importing modules using absolute paths. To do so, you can create a jsconfig.json file for your JavaScript project with the following configuration:

{
   "compilerOptions": {
       "baseUrl": "src"
    }
    ,"include": ["src"]
}

For more details, refer to the React documentation: https://create-react-app.dev/docs/importing-a-component/#absolute-imports

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

The `yarn build` Github action encounters an error due to a React component that is missing

My React app is successfully built locally using yarn build. However, when trying to deploy the app to S3 using the following configuration in Github Actions, the Build phase fails with the error message: jobs: deploy: runs-on: ubuntu-latest step ...

Tips for utilizing jQuery to identify an image that is being hovered on?

Concept My goal is to create an effect where a user hovers over an image and a transparent overlay div appears on top of it. This overlay div starts with a height of 0px and should increase to half of the image height upon hover. The hover functionality ...

Display a specific section of an image as the background in a div, with the image scaled and positioned perfectly

Utilizing a 1900 x 1080 image within a div as the background <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <style> html,body { height:100%; } #imageHolder{ ...

Unable to choose child elements in Chrome developer tools while utilizing an image overlay component (card-img-overlay) is no longer possible

I seem to be facing an issue while using the card-img-overlay class in Bootstrap. After applying this class, I am unable to inspect or select the child elements using the Chrome DevTools. For example, in the screenshot provided, I cannot click on any of th ...

Error 404: Unable to locate webpack bundle.js

As I dive into learning about Webpack configuration, I keep encountering errors in my console. It appears that my webpack app.bundle.js file is not being found. The page successfully loads with the content of my HTML file displaying, but the app.bundle.js ...

The function setState() is not performing as expected within the useEffect() hook

After retrieving data from my Mongo database, it's returned as an object within the useEffect hook function, specifically in the response. I then initialize a state called myorders with the intention of setting its value to the data fetched from the A ...

Displaying Edit and Delete options upon hovering over the data row

I'm working on a table that uses ng-repeat on the <tr> element. In the last column of each row, I have edit/delete links that should only be visible when the user hovers over the <tr> element. <tr ng-repeat="form in allData | filter:se ...

A SyntaxError was caught due to an unexpected token '<' in the constants.js file when using react and vite

I'm trying to display a button in the sidebar with a name and an icon. I've been iterating through the list of categories, which are imported from the 'constants.js' file located in the utils folder. However, instead of getting the desi ...

Is it feasible to conceal a certain field once the user has chosen another field?

Looking to create an IF statement that will help me establish a specific rule. On a customer portal page, customers can open tickets via a form where they provide information such as "software product" and "environment" from dropdown lists, as well as othe ...

During the execution of Jest tests, a singular module is experiencing undefined imports

Encountering an unusual issue with Jest, create-react-app, and typescript. Out of the blue, Jest has stopped importing my "./ProcessStore" module correctly. This module is a dependency of something that is being imported in my tests. The error message in ...

Utilizing Material UI to create a versatile and adaptable grid layout

Is there a way to set the container direction as "row" above md size screens, and "column" below md size screens? How can I achieve this? <Grid container direction = "row"(in large screens)/direction = "column"(in small screens)> I have attempted th ...

Is there a glitch preventing the connection between HTML and CSS in Notepad++ even though the link is correct?

I have encountered a puzzling situation that has left me scratching my head in confusion. Despite being a rookie, I've had experience with linking CSS files before and can't understand why it's not working this time around. This issue is per ...

Creating an SCSS class in a component that is customizable and can

After doing some research and reading various guides and blogs, I am still struggling to find the right solution for this issue. Imagine having the following classes in your main styles.scss file: .btn { padding: 5px; text-transform: uppercase; } .b ...

Angular package that includes horizontal scrolling functionality with arrow buttons

Currently seeking an Angular 2-6 package featuring a horizontal image scroll with arrows, similar to the functionality on Airbnb: https://i.sstatic.net/BOWzD.jpg Any suggestions or recommendations are greatly appreciated – thank you! ...

I can't figure out why I'm receiving undefined even though all the variables are populated with the necessary

I have been working on a project that involves implementing email and password authentication using Firebase. However, I encountered an error when the user submits their credentials: FirebaseError: Firebase: Error (auth/admin-restricted-operation). at ...

What is the best way to display changing data in a React component?

Having some trouble with printing data based on the length of an array. Here is my attempted solution, but unfortunately, it's not working as expected. I believe the issue lies in the cb function within the forEach loop. Below is the code snippet: fun ...

Navigating the process of querying a MySQL database from a Google Cloud SQL instance in a React

I am attempting to retrieve user tables from my MySQL database after successfully connecting it using MySQL Workbench. Following the documentation, I understand that I need to utilize the express API for this task. Despite installing the API and coding ex ...

React Native encountered a fatal error and had to terminate due to an uncaught NSException

This is my first attempt at creating an iOS app using React Native. I am currently following the instructions provided in the Facebook React Native Docs to kickstart my project. However, I've encountered a problem while trying to run my initial app wi ...

Why does the col-sm-* class affect the appearance on extra small screens?

For a current project, I have incorporated bootstrap into my design and have set up varying column widths for xs, sm, and md screens. Initially, I utilized col-xs-* and col-md-* to ensure the columns resized appropriately for xs, md, and lg screens. Howeve ...

The width of an HTML input and button elements do not match

Currently, I am facing an unusual issue where my input and button tags seem to have the same width assigned to them (width: 341.5px; calculated from $(window).width() / 4) in the code, but visually they appear to be of different widths. Here is a visual re ...