Applying A Custom Font To Bootstrap NavBar Items

Question

Goal: Apply a custom font (in this case, VCR_OSD_MONO_1) to navbar items.

In the past, CSS and Bootstrap have not played well with each other, its like Bootstrap hates my site.css file, but here is the navbar I am working with:

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light border-bottom box-shadow mb-3" style="background-color: #e3f2fd;">
            <img src="/images/APixelADayLogoTransparent.png" height="100" />
            <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-controller="Home" asp-action="About">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-controller="Gallery" asp-action="Gallery">Gallery</a>
                    </li>
                    <li class="nav-item">
                        @if (User.IsInRole(IdentityHelper.Administrator))
                        {
                            <a class="nav-link text-dark" asp-controller="Commissions" asp-action="Commissions">Commissions Log</a>
                        }
                    </li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </nav>

Here is the font-family I made in the site.css file:

@font-face {
    font-family: "VCR";
    src:url(../fonts/vcr_osd_mono/VCR_OSD_MONO_1.001.ttf)
}

What I have tried in the site.css file so far:

li {
    font-family: VCR;
}

a {
    font-family: VCR;
}

How do I apply the font to all the text in the nav bar?

Answer 1

It turns out that VS Code was holding onto an old version of the page. It was applying the font, but it was holding an old version of the page. So, I had to manually force the page to download everything again by disabling the cache. I did this by:

1. Pressing F12 to open up the developer tools.

2. Going to the "Network" Tab.

3. Ticking the "Disable Cache" Button

4. Doing a hard reload on the page (left clicking on the reload button, and selecting the hard reload option, or using the ctrl + shift + r shortcut.

This is what the page looks like now :) :