Roboto font descenders doesn't render correctly in Safari

Question

I'm making my first steps learning to code. I have been taking some courses on Internet and now I'm developing a Wordpress child theme so I can continue learning from the practice.

The thing is that I'm using a Google font called Roboto. It works perfectly on Google Chrome but when I use Safari the descenders of my characters doesn't render correctly. This is an example for the "g" and the "j":

You can find the link here:http://mmparis.com/SMtestsite/paintings/beijing/

I uploaded this font using the functions.php file:

function wpb_add_google_fonts() {

wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i', false ); 
}

add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );

I've been looking for a lot of tutorials and posts here but I can't find the reason or the solution. Do you have some suggestion?

Thank you

Answer 1

I had a quick inspect in Chrome on Windows and it looks like some of the padding is sitting over the bottom of the text.

Try adding height:30px; to .menu-toggle and see if that works. It should stop the padding sitting on it.

.menu-toggle {
    height: 30px;
}