Use TextFieldWithFont for find-and-replace (#2639)

src/goals/CharacterInventory/CharInv/CharacterDetail/FindAndReplace/index.tsx

@@ -1,11 +1,12 @@
-import { Button, TextField, Typography } from "@mui/material";
+import { Button, Typography } from "@mui/material";
 import { ReactElement, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "react-toastify";
 
 import CharacterReplaceDialog from "goals/CharacterInventory/CharInv/CharacterDetail/FindAndReplace/CharacterReplaceDialog";
 import { findAndReplace } from "goals/CharacterInventory/CharInv/CharacterDetail/FindAndReplace/FindAndReplaceActions";
 import { useAppDispatch } from "types/hooks";
+import { TextFieldWithFont } from "utilities/fontComponents";
 
 interface FindAndReplaceProps {
   initialFindValue: string;
@@ -43,23 +44,25 @@ export default function FindAndReplace(
       <Typography variant="overline">
         {t("charInventory.characterSet.findAndReplace")}
       </Typography>
-      <TextField
+      <TextFieldWithFont
         label={t("charInventory.characterSet.find")}
         value={findValue}
         onChange={(e) => setFindValue(e.target.value)}
         variant="outlined"
         style={{ width: "100%" }}
         margin="normal"
         inputProps={{ maxLength: 100 }}
+        vernacular
       />
-      <TextField
+      <TextFieldWithFont
         label={t("charInventory.characterSet.replaceWith")}
         value={replaceValue}
         onChange={(e) => setReplaceValue(e.target.value)}
         variant="outlined"
         style={{ width: "100%" }}
         margin="normal"
         inputProps={{ maxLength: 100 }}
+        vernacular
       />
       <Button color="primary" onClick={() => setWarningDialogOpen(true)}>
         {t("charInventory.characterSet.apply")}