Problems vertically centering text inside input element with some fonts

Question

I want to use a custom font from google fonts for my website (Source Serif Pro - https://fonts.google.com/specimen/Source+Serif+Pro?category=Serif&query=serif+pro). The problem is that, as most of the serif fonts I have tried, it has what I think are called descenders.

For example, if you click on the link and check the text samples, you can clearly see that letters such as g, p, q all "push the whole text up" which results in the text inside an input element look vertically off.

All the answers I have found either involve some random value of top padding (which feels like an ugly hack) or using a different font. Is there a correct way to make the text vertically align based on the baseline in an input element, regardless of font?

Ideally there would be some extra space on the top, which would be calculated by the browser instead of predefined padding-top values.