'Bootstrap Navbar Font Change Inquiry

I have been searching for a while and can't seem to find the answer to this question. I've found many customization pages, but nothing with font.

How do I change the font of the bootstrap navbar? I'm new too bootstrap and would appreciate some guidence.

thanks in advance!



Solution 1:[1]

First you would need to select the navbar using CSS either using navbar or the class or id of it.

Then, we need to define the font-family using CSS, and override the original Bootstrap CSS using !important.

When we put it all together it would look something like this:

navbar { font-family:Verdana !important; }

Hope this helped!

Solution 2:[2]

First specify the outer scope for example: 'navbar' class.

Then, specify the name/class of the tag surrounding the text which you wish to change the font of, this is normally an anchor tag: a

For example this css code works for me:

.navbar a{
    font-family: Verdana !important;
}

where my html code looks something like this:

<nav class="navbar bg-dark">
   <div class="collapse navbar-collapse">
      <ul class="navbar-nav">
          <li class="nav-item">
             <a class="nav-link" href="/">Home</a>
          </li>
          <li class="nav-item">
             <a class="nav-link" href="/about">About</a>
          </li>
          <li class="nav-item">
             <a class="nav-link" href="/posts">Posts</a>
          </li>
             .
             .
             .

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Shaun Loftin
Solution 2 Brian Min