How can I adjust the scope of isolated CSS is ASP.NET Core MVC such that it applies to all elements on the page

I'm a little new to ASP.NET Core, so sorry for the beginner question. I created a new ASP.NET Core MVC project and was able to build and view the template. Great.

Next, I wanted to try something simple like importing a font from Google's font API and replacing the navbar-brand link font in _Layout.cshtml. I added the preconnects and the reference to the font as such:

<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=League+Script&display=swap" rel="stylesheet">

Next I added a class to my _Layout.cshtml.css:

.league-script-regular {    font-family: "League Script", cursive;    font-weight: 400;    font-style: normal;}

Finally, I added this class to the navbar link in _Layout.cshtml as such:

<a class="navbar-brand league-script-regular" asp-area="" asp-controller="Home" asp-action="Index">TestWebsite</a>

When actually running the application, the style is not applied. After reading ASP.NET Core Blazor CSS isolation and understanding a little more about how isolation works, I understand that the "b-" + 10 character string following the elements on the page are the scope of the CSS applies to.

Currently, when going to the main page, the page source looks like this:

<header b-e6ny4ejk6j><nav b-e6ny4ejk6j class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"><div b-e6ny4ejk6j class="container-fluid"><a class="navbar-brand league-script-regular" href="/">TestWebsite</a><button b-e6ny4ejk6j class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"                        aria-expanded="false" aria-label="Toggle navigation"><span b-e6ny4ejk6j class="navbar-toggler-icon"></span></button><div b-e6ny4ejk6j class="navbar-collapse collapse d-sm-inline-flex justify-content-between"><ul b-e6ny4ejk6j class="navbar-nav flex-grow-1"><li b-e6ny4ejk6j class="nav-item"><a class="nav-link text-dark" href="/">Home</a></li><li b-e6ny4ejk6j class="nav-item"><a class="nav-link text-dark" href="/Home/Privacy">Privacy</a></li></ul></div></div></nav></header>

I'm wondering why the scope of _Layout.cshtml.css only applies to the <header>, <nav>, and <div>, and most other opening tags, while not applying to the <a> tags in the file. These links are also included in _Layout.cshtml and not generated logically.

I've also found that I can add the ::deep pseudo-element to my CSS class. This works, but does not feel like the "correct" approach.

TL;DR: How do I define/adjust the scope of isolated CSS to include all elements in _Layout.cshtml instead of just some.