Bootstrap 5 Question about changing Font-size

Question

In coding my MVC Core view, I am learning Bootstrap 5. As you can see from my code, the outer element defines font information.

My problem is, when I use an anchor link, the bootstrap css for the BTN class over-rules my font definition for the <div>.

What is the proper way to get the font style working when I need a button?

The end result should be a link button that shows text with a custom font and size.

    <div style="font-family: 'Just Another Hand'; font-size: 1.75rem; font-weight: 700;">">
        <a type="button" class="btn d-block border mb-3" asp-controller="Home" asp-action="Categories" 
           asp-route-category=@category>@category
        </a>
    </div>

Answer 1

you can use the browser css tools to see the css styles applied. the font is inherited, the size and weight by the .btn class

to manually override at the element level with style commends, it need to be on the element, the anchor in your case.

normally you would use SASS variables to build the defaults you want, rather than override. or make more selective css classes

.btn.mybtn {
    font-family: 'Just Another Hand'; 
    font-size: 1.75rem; 
    font-weight: 700;
}

then:

    <a type="button" class="btn mybtn d-block border mb-3" 
         asp-controller="Home" 
         asp-action="Categories" asp-route-category=@category>
              @category
    </a>

Answer 2

(duplicate post)