Desktop and Mobile line height are not aligning

Site URL: https://petitepaks.squarespace.com/

I added a custom font into my CSS and it looks fine in the Headers on the desktop view. When I click into the mobile view the line height spacing becomes huge. I have tried to add CSS to both mobile and desktop but when one is right, the other is not. Any help appreciated!

Desktop view:

Mobile:

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
h1 {
    line-height: 25px;
}
h2 {
	line-height: 22px;
}
}