We are building a new website and want to use some web fonts (hosted on fonts.google.com). We've done this in the past and did not have an issue (using OpenSans back then). We've settled for a different font this time (https://fonts.google.com/specimen/Josefin+Sans).
But when I use the font, it looks like the text is mis-aligned compared to using the system font or sans-serif or basically any other font. It feels like the font is top-aligned within its text-box.
It should be centered vertically within the div by setting the line-height of the div to its height.
Am I imagining things? If not, is there a way to fix this? Either by some css-magic or by editing the font (although I have no idea how to do this).
I've created a codepen to illustrate my problem by copying the relevant styles from our website: https://codepen.io/w00dy73/pen/mdewMNz
font-family: 'Josefin Sans', sans-serif;
(Stackoverflow tells me to put code next to the codepen link, but I'm not sure what the right code would be)
As requested, here is a screenshot of what it looks like to me (Firefox on Mac):
The black line represents the vertical center of the div and cuts the icon in half. In the top div, the text is not in half it's a bit top-heavy. In the bottom div the text is perfectly centered. The blue box is the outline of the texts box and the dotted lines are what Firefox shows me in the dev console when I inspect the elements. The text box of the top div is not aligned with the image (slight offset of 1-2px to the top) and the bottom works fine.
