0

I'm using React Quill with the Snow theme. I'm trying to figure out how to add custom fonts so that users may select some of the Google Web fonts I use in other parts of the app.

If I go to one of the few modern (hooks) React examples I found here, I can see an example configuration with an empty font menu like this: { font: [] } If I copy pasta that, I get a font select menu with three choices: Serif, Sans Serif, and Monotype. Attempting to add any strings to that array simply renders each select option as "Sans Serif." On this page of the documentation I see the same empty array. Here there is a comment which seems to indicate that this is for use with default theme values. I can't seem to find any mention in the docs of how to add more fonts. I tried using @import to import 'react-quill/dist/quill.snow.css' into my own CSS file and then I tried adding

.ql-font-roboto {
    font-family: Roboto;
}

I had hoped that would make Roboto magically appear in the select menu as it would now be part of my theme, but no such luck. Anyone know hot to make this happen?

Neil Girardi
  • 4,533
  • 1
  • 28
  • 45
  • Do the [Quill docs for customizing attributors](https://quilljs.com/guides/how-to-customize-quill/#customizing-attributors) help? They appear to cover the case of adding Roboto and a few other fonts. – smashed-potatoes Aug 23 '22 at 01:12

1 Answers1

0

This might help you

const font = Quill.import('attributors/style/font');
font.whitelist = ['asap', 'podkova'];
Quill.register(font, true);
Wilmar Yucumá
  • 1
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 10 '23 at 09:27