React + Aphrodite Fonts

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 belowhttps://www.npmjs.com/package/aphrodite-local-styles#font-faces