Bootstrap 5 - How to isolate and edit a nav bar font

I am having an issue where I am trying to isolate the font used in a Bootstrap 5 nav bar, so I can edit the font used along with the color, font size, etc.

Codepen: https://codepen.io/R-P-P/pen/zxOdyJb?editors=1100

.nav-link {
  padding: 10px 8px 12px 8px !important;
}


.navbar-dark,
.navbar[data-bs-theme=dark] {
  --bs-navbar-color: rgba(255, 255, 255, 0.55);
  --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
  --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
  --bs-navbar-active-color: #fff;
}

<html lang="en">

<head>
  <title>Isolate Nav Font</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>


  <nav class="navbar navbar-expand-xxl navbar-dark row g-0 m-0 p-0" style="background-color: rgb(150 150 150) !important;">

    <div class="container m-0 p-0">
      <ul class="navbar-nav me-auto">
        <li class="nav-item"><a class="nav-link" href="">Home</a></li>
      </ul>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>

      <div class="collapse navbar-collapse" id="mynavbar">
        <ul class="navbar-nav me-auto">
          <li class="nav-item"><a class="nav-link" href="">Link</a></li>
          <li class="nav-item"><a class="nav-link" href="">Link</a></li>
        </ul>
      </div>
    </div>
  </nav>

</body>

</html>

I have tried creating new classes and editing what I thought was the bootstrap class however, have not had luck. Here is one of the classes I have tried to edit.

CSS

.navbar-dark, 
.navbar[data-bs-theme=dark] {
  --bs-navbar-color: rgba(255, 255, 255, 0.55);
  --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
  --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
  --bs-navbar-active-color: #fff;
}

Solution

Here is a way to change font.

.navbar .nav-link{
  font-size: 2rem;
}

You can also assign an id to nav. That way you can target just this nav.

<nav id="my-navbar" class="navbar navbar-expand-xxl navbar-dark row g-0 m-0 p-0" style="background-color: rgb(150 150 150) !important;">

#my-navbar{
  font-family: 'serif';
  font-size: 1em;
  /* More */
}

Another way is to define your own utility class and add them to nav.

.my-nav-font{
  font-family: 'serif';
  font-size: 1em;
}