Estoy creando una aplicación con el próximo JS usando [theme-UI][1]. Pero en mi proyecto, tengo que usar fuentes locales o fuentes personalizadas. Pero no tengo idea de cómo puedo hacer eso. Aquí está mi tematización
const theme = { fonts: { body: 'CircularBlack', heading: 'CircularBlack', monospace: 'Menlo, monospace', },Aquí está la tematización-
export default { fonts: { body: "fufu", //text heading: "fufu", //boxShape monospace: "fufu", //header } styles: { root: { p: 0, m: 0, background: 'primary', cursor: 'default', position: 'relative', overflowX: "hidden", fontFamily: "body", } }, }Aquí uso el nombre de las fuentes en el objeto de fuentes y lo llamo al elemento raíz. [1]: https://tema-ui.com/
en primer lugar, obtenga los archivos .woff y .woff2 para las fuentes que desea integrar desde la web.
Coloque estos archivos en una carpeta como
next-app/public/fonts/menlo.woff2
Nota: "debe estar en una carpeta pública"
Luego, debe instalar el paquete npm "@emotion/react" y luego integrar las fuentes de alguna manera, con CSS básico como:
_app.js:
/** @jsxImportSource theme-ui */ import { Global, css } from "@emotion/react"; import { ThemeProvider } from 'theme-ui'; import theme from 'theme'; function MyApp({ Component, pageProps }) { return ( <ThemeProvider theme={theme} > <Global styles={css` @font-face { font-family: "SF Pro"; src: url('fonts/SFPRODISPLAYMEDIUM.woff') format("woff"); font-style: normal; font-weight: 300; } @font-face { font-family: "SF Pro"; src: url('fonts/SFPRODISPLAYREGULAR.woff') format('woff'); font-style: normal; font-weight: 400; } @font-face { font-family: "SF Pro"; src: url('fonts/SFPRODISPLAYBOLD.woff') format("woff"); font-style: normal; font-weight: 600; } `} /> <Component {...pageProps} /> </ThemeProvider> ) } export default MyAppen la parte de tematización inserte estos,
export default { fonts: { body: "SF Pro", heading: "SF Pro", monospace: "SF Pro" }, fontWeights: { body: 400, heading: 600, primary: 300 }, styles: { root: { p: 0, m: 0, bg: 'light', cursor: 'default', position: 'relative', overflowX: "hidden", fontFamily: 'body', minHeight: "100%", overflowX: "hidden" } }, }Obtenga los archivos .woff y .woff2 para las fuentes que desea integrar desde la web (por ejemplo, https://www.cufonfonts.com/font/menlo )
Coloque estos archivos en una carpeta como my-next-app/public/fonts/menlo.woff2 ; todo lo que se encuentre en la carpeta public dentro de una próxima aplicación js se servirá de forma estática; solo asegúrese de copiar estos archivos también en su servidor web si su alojamiento manualmente.
Luego, debe integrar las fuentes de alguna manera, con CSS básico como:
@font-face { font-family: Menlo; font-weight: 300; font-style: normal; font-display: swap; src: url("/fonts/Menlo-Monospace.woff2") format("woff2"), url("/fonts/Menlo-Monospace.woff") format("woff");; } No conozco theme-ui, así que no puedo decir dónde se deben integrar estas definiciones @font-face . Lo hacemos en un global-styles.css que simplemente integramos con un archivo personalizado pages/_app.tsx ( https: //nextjs.org/docs/advanced-features/custom-app )
Ahora debería estar bien para usar la fuente en cualquier lugar de su aplicación, también en su interfaz de usuario de tema como ya ha escrito.
Debería poder acceder a su CSS global de esta manera:
import React from "react"; import { Global, css } from "@emotion/core"; import { ThemeProvider } from "theme-ui"; import theme from "../components/theme"; const App = ({ Component, pageProps }) => { return ( <ThemeProvider theme={theme}> <Global styles={css` "*": { boxsizing: "border-box"; } html, body { width: 100%; height: 100%; } figure { margin: 0; } @font-face { font-family: "Circular"; src: url("/fonts/circular/circular-light.woff2") format("woff2"); font-style: normal; font-weight: 300; font-display: swap; } @font-face { font-family: "Circular"; src: url("/fonts/circular/circular-bold.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; } @font-face { font-family: "Circular Mono"; src: url("/fonts/circular/circular-mono.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: "Cambon"; src: url("/fonts/cambon/cambon-bold.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; } `} /> <Component {...pageProps} /> </ThemeProvider> ); }; export default App;