Are there alternative to '@font-face', for universal JS & React

Question

My app is a universal JS, React app, I am styling using radium and would like to avoid using css modules if possible. Is there a way to achieve this?

this is what I have tried so far.

using react-helmet to set @font-face in the header, didn't work for obvious reasons.

Here is my app.jsx

 <Helmet
              style={[{
                'cssText': `
                  @font-face {
                    font-family: 'Roboto Condensed';
                    src: url('./fonts/roboto-condensed-400-normal.woff2') format('woff2'), url('./fonts/roboto-condensed-400-normal.woff') format('woff');
                  }
                  @font-face {
                    font-family: 'Roboto Condensed';
                    font-weight: 700;
                    src: url('./fonts/roboto-condensed-700-normal.woff2') format('woff2'), url('./fonts/roboto-condensed-700-normal.woff') format('woff');
                  }
                  body {
                    font-family: 'Roboto Condensed'
                  } ....

Any help would be appreciated thanks.

Answer 1

For people like me who found this question three years later, this now works:

<Helmet>
   <style>{css_string}</style>
</Helmet>