I am currently working on a project that involves React, Node, and Express. While I am not certain if the technology stack is causing any issues, it may be pertinent to my question.
Observation #1:
In my project, I have utilized font-face to host specific fonts and integrate them. An example of this implementation can be seen below:
@font-face {
font-family: Montserrat-Black;
src: url(/src/resource/font/montserrat-black.ttf);
}
Observation #2:
The font-face declarations are placed in the index.css file, which is then imported into the index.js file. Since React loads all components within the index.js file, it ensures that the styles are applied throughout the entire generated DOM tree.
Observation #3:
Moreover, for each component, I have created separate CSS files. For instance, the menu-bar-title component has its own css file containing relevant styles. Below is an excerpt from the menu-bar-title.css file:
#menuBarTitle{
font-family:Montserrat-Black;
}
Observation #4 :
This snippet illustrates how the mentioned component was developed:
import React from 'react';
import './css/menu-bar-title.css'
export default class MenuBarTitle extends React.Component {
render() {
return (
<div id="menuBarTitle" className="absolute">
HELLO WORLD!
</div>
);
}
}
Issue :
Despite what seems like a smooth workflow within my React structure and successful creation of the component, there is an issue with the font face! Upon inspection, the console displays the following error message:
GET http://localhost:3000/src/resource/font/montserrat-black.ttf net::ERR_ABORTED 500 (Internal Server Error) index.js:1
This error suggests that the flow of CSS files is correct as it locates the associated font face and attempts to load it from the designated directory. However, the font does not display correctly!
Any insights on identifying the root cause of this problem would be greatly appreciated.
Thank you.