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>
);

希望这可以帮助您。
<details>
<summary>英文:</summary>
I want to use some fonts, but I&#39;m having difficulties to find information/documentation about how to import etc.
I am using a styled component library: [Next.UI][1].
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&#39;s my code for now:
    
 
    import { createTheme, NextUIProvider, styled } from &#39;@nextui-org/react&#39;;
        const theme = createTheme({
                type: &quot;light&quot;,
                theme: {
                    colors: {...},
                    fonts: {
                        sans: &#39;Comic Sans MS&#39;,
                        mono: &#39;Andale Mono&#39;,
                        serif: &#39;Gilda Display &#39;,
                    },
                }
            });
            
            const root = ReactDOM.createRoot(document.getElementById(&#39;root&#39;));
            root.render(
                &lt;NextUIProvider theme={theme}&gt;
                    &lt;App /&gt;
                &lt;/NextUIProvider&gt;
            );
  [1]: https://nextui.org/docs/theme/customize-theme
</details>
# 答案1
**得分**: 1
以下是翻译好的部分：
从styled-components模块中使用`createGlobalStyle`模块的示例...
fontStyles.js
```javascript
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;

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