CSS Bulma with different font-family and line-height

I am using Bulma css framework with custom font Comfortaa from https://fonts.google.com/specimen/Comfortaa

But the font has some extra space at bottom and it makes all text of elements to be little higher than it should be.

On img: 1) comfortaa 2) roboto 3) Segoe UI (with button and h1 with border)

How to make text of elements with Comfortaa font on same level as others ? Preferably in Bulma. Thank you.

Solution

You could add extra padding to the text container to push it down a little. You'll need to tweak the amount of padding to suit. Below is an example of how that could work. I have created a class .text-offset that pushes the text down 1px with padding-top.

The whitespace you have outlined in your image is the fonts line height, it is different from font to font. Apparently, some web fonts try to balance the top and bottom spacing out for this reason.

body {
  font-family: 'Comfortaa', cursive;
  padding: 20px;
}

.text-offset {
  padding-top: 1px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<a class="button is-primary">
  <span class="icon is-small">
    <i class="fab fa-github"></i>
  </span>
  <span class="text-offset">GitHub</span>
</a>