Web page content changes with different fonts

I have a problem regarding the different fonts and how they change the web page depending on which font is in use. The main font I used in this web page is Cairo imported from Google Fonts and my secondary option is Geneva. With the Cairo font there is padding at the top of the navigation bar but with the Geneva font that doesn't apply along with all other content on the web page. How do i fix this

* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body {
    font-family: 'Cairo', Geneva;
    background-color: #313131;
    color: white;
}

Cairo Font & Content Image - Geneva Font & Content Image

Start with the font you want, and end with a generic family (to let the browser pick a similar font in the generic family, if no other fonts are available).

  body {
       font-family: 'Cairo', Geneva,sans-serif;
       background-color: #313131;
       color: white; 
  }

try this