Fonts generated in HTML & PDF are different in wkhtmltopdf

Seems this question has been posted a few times, but posting here again because I couldn’t find anything useful for my issue 🙁

I am using wkhtmltopdf to generate pdf files from HTML views. I have added custom fonts in the site. The rendered HTML view looks great. But the CSS styles aren’t applied in the PDF properly.

My CSS

@font-face {
    font-family: 'MyFont';
    src: url('fonts/MyFont-Light.otf') format('opentype'),
    url('fonts/MyFont-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'MyFont';
    src: url('fonts/MyFont-Regular.otf') format('opentype'),
    url('fonts/MyFont-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

body {
    font-family: 'MyFont', Helvetica, Arial, sans-serif;
    font-weight: 300;
}

h1 {
    font-weight: 400;
}

HTML View
enter image description here

PDF View
enter image description here

Can someone please help me resolve this issue? Thanks in advance.