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.