Using fonts with Next.UI and react.js

Question

I want to use some fonts, but I'm having difficulties to find information/documentation about how to import etc.

I am using a styled component library: Next.UI.

In my index.js I am creating a theme and I use it in my React application. That theme already works, but there is also a property for fonts.

Can someone give me an example of using different fonts? And how do I know what fonts are supported? Or how can I import fonts?

Thanks in advance!

Here's my code for now:

import { createTheme, NextUIProvider, styled } from '@nextui-org/react';

    const theme = createTheme({
            type: "light",
            theme: {
                colors: {...},
                fonts: {
                    sans: 'Comic Sans MS',
                    mono: 'Andale Mono',
                    serif: 'Gilda Display ',
                },
            }
        });
        
        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(
            <NextUIProvider theme={theme}>
                <App />
            </NextUIProvider>
        );

Answer 1

use createGlobalStyle module from styled-components like so...

fontStyles.js

import { createGlobalStyle } from "styled-components";
import RobotoWoff from "./fonts/roboto-condensed-v19-latin-regular.woff";
import RobotoWoff2 from "./fonts/roboto-condensed-v19-latin-regular.woff2";

const FontStyles = createGlobalStyle`

@font-face {
  font-family: 'Roboto Condensed';
  src: url(${RobotoWoff2}) format('woff2'),
       url(${RobotoWoff}) format('woff');
}
`;

export default FontStyles;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

index.js

import FontStyles from "./fontStyles";

ReactDOM.render(
  <React.StrictMode>
    <FontStyles />
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);