I am currently running a MEAN application with Angular2 on the frontend and using Stylus-based CSS for styling.
After compiling, the resources are organized in the following folder structure:
- dist
- backend
- frontend
- resources
- font.woff
- font.woff2
- general.css (compiled styles)
The general.css file is compiled from general.styl, which contains:
@font-face
font-family: retro-computer;
src: url(font.woff2) format(woff2);
src: url(font.woff) format(woff);
nav {
border-width: 10px;
border-style: solid;
font-family: retro-computer;
}
The fonts' relative location seems to be correct as they are in the same folder as the CSS file.
To ensure the fonts are accessible across the server, I have defined the static path correctly in app.ts in the backend:
private config() {
this.app.set("views", path.join(__dirname, "..", "frontend", "views"));
this.app.set("view engine", "hbs");
this.app.use("/scripts", express.static(path.join(__dirname, "..", "frontend")));
this.app.use("/node_modules", express.static(path.join(__dirname, "..", "..", "node_modules")));
this.app.use("/resources/styles", express.static(path.join(__dirname, "..", "resources", "styles"))); //<-- THIS
}
When attempting to access the font from http://localhost:8000/resources/styles/font.woff, it works fine and the font is downloaded by the browser.
The generated CSS is also successfully applied to the home page in the Angular2 app. However, there seems to be an issue with rendering the font in Chrome (works fine in Microsoft Edge but not yet tested in Firefox).
I have tried adjusting the paths in the stylus and CSS files, but the problem with the font rendering persists. Any insights on what I might be doing wrong would be greatly appreciated.
Thank you!