Ability to change font-family

[bogdansoare]

Is there anyway to change the font-family?
Or maybe let it inherit from the body and not set it as sans-serif

[fkhadra]

I don't know why I didn't think about it before. Thanks @bogdansoare for the suggestions.

[fkhadra]

Hey @bogdansoare,

Actually, it can already be done:

For all toast:

<ToastContainer toastClassName={css({ fontFamily: "Times New Roman, Serif" })} />

Per toast:

toast(content, {
  className: css({ fontFamily: "Times New Roman, Serif" })
});

Anyway, I'll probably allow to set it via the style helper.

[fkhadra]

Feature released.

[khaoptimist97]

Hi @fkhadra . I use style hepler to set font family for ToastContainer but it doesn work: <ToastContainer position="bottom-right" autoClose={3000} hideProgressBar={false} newestOnTop={false} closeOnClick rtl={false} pauseOnVisibilityChange draggable pauseOnHover transition={Zoom} style={{ fontFamily: 'Patrick Hand, cursive' }} />
I using google font Patrick Hand for the body. Please help me

[fulanovic]

Put styles in CSS class adn apply it with toastClassName='className'

[sgehrman]

didn't work. Which css()? I have one in Chakra. Doesn't work. Why can't this be normal scss modules?

[ex-ali-edx]

Hi @fkhadra . I use style hepler to set font family for ToastContainer but it doesn work: <ToastContainer position="bottom-right" autoClose={3000} hideProgressBar={false} newestOnTop={false} closeOnClick rtl={false} pauseOnVisibilityChange draggable pauseOnHover transition={Zoom} style={{ fontFamily: 'Patrick Hand, cursive' }} /> I using google font Patrick Hand for the body. Please help me

Thankyou... this has been helpful to me.. :)

[Xaypanya]

Hey @bogdansoare,

Actually, it can already be done:

For all toast:

<ToastContainer toastClassName={css({ fontFamily: "Times New Roman, Serif" })} />

Per toast:

toast(content, {
  className: css({ fontFamily: "Times New Roman, Serif" })
});

Anyway, I'll probably allow to set it via the style helper.

thanks

[avneetmalhotra]

A better way to do it would be to override the css variable "--toastify-font-family"
ref - https://fkhadra.github.io/react-toastify/introduction/

If you want to inherit from body you can do:-
--toastify-font-family: inherit;

Or if you like to override it then:-
--toastify-font-family: Serif;

[MiladJoodi]

put :
.Toastify__toast-body { font-family: 'FONT-NAME'; }

in your .css file

[fiizzy]

In my case, I needed to use my project's font, so I just use "inherit", and it inherits from the body