Search code examples
javascriptsweetalert

How can i change the font-family of SweetAllert.js?


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.


Solution

  • 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>