Mikähän on, kun vapaa-ajan React+Node projektissa ei toimi custom-fontti enää production buildissa?
Fontti on kansiossa
src/fonts/SuperLegend.ttf
App.css:
Koodi:
@font-face {
font-family: 'SuperLegend';
font-display: fallback;
src: local('SuperLegend'),
url('./fonts/SuperLegendBoy-4w8Y.ttf') format('truetype');
}
.jokuClass {
font-family: 'SuperLegend', Helvetica, sans-serif;
}
Jos ajan fronttia
react-scripts start, fontti näkyy kuten pitääkin. Tämän jälkeen ajan buildin, ja katson että buildissa fontti on mukana kansiossa
/static/media/SuperLegendBoy-4w8Y.18828ef8.ttf. Siirrän buildin backendin alle, ja Node-express -applikaatiossa on
app.use('', express.static('build')).
Nyt kun menen backendin tarjoamaan sivuun, tuota fonttia käyttävä teksti puuttuu sivulta täysin. Ei edes fallbackaa muuhun fonttiin. Console-logiin ei tule virheitä. Jos kuitenkin poistan build-kansiosta fontin, saan heti Failed to load resource 404 virheen consoleen, mutta teksti ei silti fallbackaa.
Mitähän minulta puuttuu, että saisin tuon a) fallbackaamaan muuhun fonttiin jos puuttuu ja b) käyttämään custom-fonttia?