how to change font family of sweetalert

Question

How can I change the font family in sweetalert? Thank You

swal({
            title: "Are you sure?",
            text: "Your will not be able to recover this imaginary file!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel plx!",
            closeOnConfirm: false,
            closeOnCancel: false
        },

Solution 1

Configuration options are listed here. They do not appear to include an option for changing the font.

However, all of the elements involved in the SweetAlert popup have SweetAlert-specific classes so you should be able to set the fonts via CSS. Some key classes and examples are listed in the SweetAlert docs under Theming.

Solution 2

Add this to the css!

.swal2-popup {
  font-size: 1.6rem !important;
  font-family: Georgia, serif;
}

Comments

[Rory McCrossan]

Change the CSS rule for the alert.

[Bishwas]

The user is asking about the font family. Not font size.

[Arun P]

I have updated the answer, its just to add the style for the same class