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
        },

Change the CSS rule for the alert. – Rory McCrossan Jul 17 '19 at 15:30 — Rory McCrossan, Jul 17 '19 at 15:30

score 14 · Accepted Answer · edited Jun 20 '22 at 10:01

14

Add this to the css!

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

edited Jun 20 '22 at 10:01

Ouroborus

16,237
4
39
62

answered Jun 01 '21 at 07:15

Arun P

541
4
11

1

I have updated the answer, its just to add the style for the same class – Arun P Jun 09 '21 at 08:53

score 9 · Answer 2 · answered Jul 17 '19 at 21:06

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.

score 1 · Answer 3 · answered Feb 07 '23 at 19:00

For sweetalret2 Add this code to you css file First one is for main title and the other for subtitle

      h2#swal2-title
      {
         font-size: 24px;
         font-family:'Lexend';
         color:theme('colors.metal');
      }
      div#swal2-html-container{
         font-size: 16px;
         font-family:'Heebo';
         color: theme('colors.metal');
      }

score 0 · Answer 4 · edited Nov 06 '22 at 19:16

0

you could actually do it by targeting .swal2-title, so in css

.swal2-title {
  font-family:'Montserrat', sans-serif;
}

edited Nov 06 '22 at 19:16

Tyler2P

2,324
26
22
31

answered Nov 03 '22 at 15:23

John Dale Unite

1
1

how to change font family of sweetalert

4 Answers4