React + Aphrodite Fonts - reactjs

Question

I have a problem with add font in React with use Aphrodite.
In the Aphrodite documentation (https://github.com/Khan/aphrodite) we have described how to add our font to project, but it didn't work for me.
In terminal (vsc), after npm start I don't see any errors,
but in the browser (chrome) I have this: TypeError: _nested.set is not a function.
import React, { FC, useState } from "react";
import ScreenWrapper from "components/ScreenWrapper";
import StyledInput from "components/StyledInput";
import TextArea from "components/TextArea";
import StyledText from "components/StyledText";
import { StyleSheet, css } from "aphrodite";
import { colors } from "styles";
import { i18n } from "locale";
import "fonts/Roboto.woff";
interface Props {}
const HomeScreen: FC<Props> = () => {
const [inputValue1, setInputValue1] = useState<string>("");
const [textareaValue1, setTextareaValue1] = useState<string>("");
const handleInputValue = (value: string): void => {
setInputValue1(value);
};
const handleTextareaValue = (value: string): void => {
setTextareaValue1(value);
};
return (
<ScreenWrapper>
<div className={css(styles.homeScreen)}>
<h3>{i18n.t("header:title")}</h3>
<StyledInput
value={inputValue1}
onChange={handleInputValue}
placeholder={i18n.t("textAreaPlaceholder:search")}
/>
<TextArea
value={textareaValue1}
onChange={handleTextareaValue}
placeholder={i18n.t("textAreaPlaceholder:type")}
/>
<StyledText style={styles.testText}>{i18n.t("test:lorem")}</StyledText>
</div>
</ScreenWrapper>
);
};
const Roboto = {
fontFamily: "Roboto",
fontStyle: "normal",
fontWeight: "normal",
src: "url('fonts/Roboto.woff') format('woff')",
};
const styles = StyleSheet.create({
homeScreen: {
flexDirection: "column",
alignItems: "stretch",
display: "flex",
flexGrow: 1,
backgroundColor: colors.white,
textAlign: "center",
textTransform: "uppercase",
color: colors.blue4,
},
testText: {
margin: "20px 10vw",
fontFamily: Roboto,
},
});
export default HomeScreen;
Had anyone similar problem?

Answer 1

Try the following.
const styles = StyleSheet.create({
testText: {
margin: "20px 10vw",
fontFamily: [AldotheApacheFont, "sans-serif"],
},
});
Or check below https://www.npmjs.com/package/aphrodite-local-styles#font-faces