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?
JavaScript
x
22
22
1
<!DOCTYPE html>2
<html>3
<head>4
<title> test </title>5
<link rel="stylesheet" type="text/css" href="css/sweetalert2.css">6
<script>7
function myFn(){8
swal(9
'Succes!',10
'Mesajul a fost trimis cu succes!',11
'success'12
)13
}14
</script>15
</head>16
<body>17
18
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>19
<script type="text/javascript" src="js/sweetalert2.js"></script>20
</body>21
</html>22
Screenshot: http://prntscr.com/jnoula Github / JSFiddle: http://prntscr.com/jnovyf
JavaScript
1
4
1
<?php echo '<script type="text/javascript">2
myFn();3
</script>'; ?>4
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:
JavaScript
1
4
1
Swal.fire({2
title: 'So beautiful yet terrific!',3
icon: 'success'4
})JavaScript
1
3
1
body {2
font-family: 'Ubuntu';3
}JavaScript
1
2
1
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">2
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>