I am developing webapp with spring boot in the backend and react in the frontend (i use create-react-app to be specific). Now i thought it would be the easiest solution to have the frontend app served by spring whenever a root-level request comes in or even a request for any route thats not occupied by my backend API.
To integrate local fonts, i declare the font in index.css
of my frontend:
@font-face {
font-family: 'TheFont';
src: local('TheFont'), url(./fonts/TheFont/TheFont.ttf) format('truetype');
}
The font file is (in my project) located at src/fonts
. Running it on the development server (npm start
) everything works fine. But when i build the app and copy it to resources/static/
in my spring boot backend, the fonts are not displayed while everything else works as expected.
The most confusing thing about this is that when i search the source of the website in my browser and follow the link to the rendered css and then the url to the font file (which looks like ../../static/media/TheFont.9f30b69a.ttf
) and request for that file directly via localhost:8080/static/media/TheFont.9f30b69a.ttf
, i get the font file!
The path to the rendered css file is static/css/main.767343db.css
, so the relative path to the font should be OK.
BTW i set "homepage" : "."
in the package.json
of the react app to get asset paths relative to the index.html
file (as recommended in the many posts and examples i read).
What am i doing wrong? Could this be caused by the fact that i serve the frontend with the spring boot backend app?
Thank you for your help!