Home > Software engineering >  How can i change the font-family of SweetAllert.js?
How can i change the font-family of SweetAllert.js?

Time:06-12

I am having a problem with changing the font-family of a sweetalert.

The script is bellow:

swal({
          title: "Success!",
          text: "You created your team.That's amazing!",
          type: "success",
          timer: 2000,
          showConfirmButton: false
        }, function(){
              window.location.href = "/generatelinkQR.php";
        });

I have so far tried to change the css with .swal2-popup but it did not work. Any suggestions? Thank for your time.

CodePudding user response:

You can directly style .swal-modal which is used by sweet alert to display the dialog box.

(I have updated your code to use the latest version of sweet alert, as it seems you were using an old version).

@import url('https://fonts.googleapis.com/css2?family=Kdam Thmor Pro&display=swap');

.swal-modal{
  font-family: 'Kdam Thmor Pro', sans-serif;
}
<html>

<head>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>

<body>
  <script>
    swal({
      title: "Success!",
      text: "You created your team.That's amazing!",
      icon: "success",
      timer: 2000,
      button: false
    }).then(value => {
      window.location.href = "/generatelinkQR.php";
    });
  </script>
</body>

</html>

  • Related