Question

How can I create a custom font family that can be used inside of <span></span> tags, and only within those tags and not site wide?

My end goal is to be able to use this within a specific area of the site, and not anywhere else.

Answer 1

Give the span a class and assign font-family css properties to it, IE:

<span class="specialFont">Hello</span>

then in your css:

.specialFont {
    font-family: verdana;
 }

As per your comment, to use custom fonts you can use this, HOWEVER keep in mind this isn’t supported in all browsers:

@font-face {
   font-family: CustomFont;
   src: URL('/fonts/myfont.otf'); 
}

.specialFont { 
     font-family: CustomFont;
}