to add a custom font family we must inject font into Quill

1- import and register a new font family to display in the list of fonts add this code above the component where using ReactQuill

// import ReactQuill and CSS file for snow theme
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
//init var to customize fonts
const Quill = ReactQuill.Quill;
const FontAttributor = Quill.import("attributors/class/font");
//add your font family names in this array
FontAttributor.whitelist = ["sofia"];
Quill.register(FontAttributor, true);

2- inside the component add ReactQuill with a toolbar containing font property

<ReactQuill
        theme="snow"
        value={""}
        modules={{
          toolbar: [[{ font: FontAttributor.whitelist }],],
        }}
      />

it will display like this so we must add CSS code to display the correct font family name with the effect font family in the text in ReactQuill

3- by CSS code we finish that notice the font called 'sofia'

/* Set dropdown font-families */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sofia"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sofia"]::before{
  font-family: "sofia", cursive;
  content: "Sofia";
}
/* Set effect font-families */
.ql-font-sofia {
  font-family: "sofia", cursive;
}

the result after all the changes