I have a question about SweetAlert2. As you can see in this picture that’s how my swal2 looks, but on the official site or others the text is smoother, how should I fix this? Maybe I’ve forgot one CSS/JS?
<!DOCTYPE html> <html> <head> <title> test </title> <link rel="stylesheet" type="text/css" href="css/sweetalert2.css"> <script> function myFn(){ swal( 'Succes!', 'Mesajul a fost trimis cu succes!', 'success' ) } </script> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript" src="js/sweetalert2.js"></script> </body> </html>
Screenshot: http://prntscr.com/jnoula Github / JSFiddle: http://prntscr.com/jnovyf
<?php echo '<script type="text/javascript"> myFn(); </script>'; ?>
Advertisement
Answer
SweetAlert2 doesn’t define font-family but inherits it from the document. The reason is that alerts should look consistent with the rest of the page.
Define the font-family
for your page and you’ll be fine 🙂
Demo with Ubuntu typeface:
Swal.fire({ title: 'So beautiful yet terrific!', icon: 'success' })
body { font-family: 'Ubuntu'; }
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>