Unable to change font settings in top navigation bar CSS-CodePudding

I have unsuccessfully been attempting to change the font family for my top navigation bar to Ubuntu. Currently, the text is not changing and is reverting to this default.

I have experimented with changing it to a div and improving specificity, but it's not working. I'm not sure if it's being overwritten by the font settings I have put on top? Would appreciate any guidance on this!

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');
@importurl('https://fonts.googleapis.com/css?family=Ubuntu:400,500,700');
@import url('https://fonts.googleapis.com/css?family=Roboto Mono:400,700');
* {
  font-family: system-ui, sans-serif;
}

* {
  margin: 0;
  padding: 0;
}

header {
  font-family: 'Ubuntu';
}

body {
  font-family: 'Montserrat';
  text-align: left;
}


/*typography*/

h1 {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: bold;
  font-size: (45px 1vw);
  line-height: 55px;
  text-align: center;
  letter-spacing: 1px;
}

h2 {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-size: calc(30px 1vw);
  line-height: calc(37px 1vw);
  letter-spacing: 1px;
  color: #FFFFFF;
}

h3 {}

ul {
  list-style: inside disc;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  font-size: calc(16px 1vw);
  line-height: calc(22px 1vw);
  color: #FFFFFF;
}


/* Header */

header {
  width: 100%;
  height: 122px;
  background: #FFFFFF;
  position: fixed;
}

.wrapper {
  width: 90%;
  margin: 0 auto;
}

.logo {
  width: 30%;
  float: left;
  text-align: left;
  line-height: 122px;
}

nav {
  float: center;
  line-height: 122px;
}

nav a {
  font-family: 'Ubuntu';
  text-decoration: none;
  letter-spacing: 4px;
  font-size: calc(50px 1vw);
  color: #616161;
  padding: 36px 10px;
  margin: 0 1 px;
}

nav a:hover {
  background: #F3EA65;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <!-- <div > -->
  <header>
    <div class="wrapper">
      <div class="logo">
        <img src="asdf.png" alt="Logo" width="25%" ;>
      </div>
      <nav>
        <a href="#">about</a>
        <a href="#">our team</a>
        <a href="#">who we help</a>
        <a href="#">get involved</a>
        <a href="#">Contact</a>
        <a href="#">Donate</a>
      </nav>
    </div>
  </header>

CodePudding user response：

It is better to include the fonts link in header tag in HTML and then run.Also add space after @import in second link.