Error when including fonts in css files in adapted portlets

[0xAnakin]

Hello,

I have created a react-app via create-react-app and deployed it into Liferay.
inside my src directory there are 2 sibling directories among others fonts and scss.

Scss directory contains a styles.scss file which is loading fonts like so:

@font-face { font-family: "slick"; src: url("../fonts/slick.eot"); src: url("../fonts/slick.eot?#iefix") format("embedded-opentype"), url("../fonts/slick.woff") format("woff"), url("../fonts/slick.ttf") format("truetype"), url("../fonts/slick.svg#slick") format("svg"); font-weight: normal; font-style: normal; }

The demo works fine via serve -s build or npm run start but once depoyed into Liferay all fonts are missing because the font url is: http://localhost:8080/static/media/slick.b7c9e1e4.woff.

Something is missing...

After inspecting build.liferay/jar/static/css/main.chunk.css I saw this:

@font-face { font-family: slick; src: url(/static/media/slick.ced611da.eot); src: url(/static/media/slick.ced611da.eot) format("embedded-opentype"), url(/static/media/slick.b7c9e1e4.woff) format("woff"), url(/static/media/slick.d41f55a7.ttf) format("truetype"), url(/static/media/slick.f97e3bbf.svg) format("svg"); font-weight: 400; font-style: normal }

Finally the font can be loaded via this url http://localhost:8080/o/liferay-demo-1-0.1.0/static/media/slick.d41f55a7.ttf so the /o/{WIDGET_NAME-VERSION} is missing...

[izaera]

I've created a wiki page to track all known limitations so that people knows about them. I'm documenting this problem there.

It can be fixed to a extent (it will work in most cases).