Figuring out how to import third party fonts took me a while to get to load properly but it worked out. Requires CSS and HTML. I just use www.onlinewebfonts.com/ once I find the font I need/want I can simply copy the <link> into the <head> of the html then I open the global css style sheet and copy/paste the @font-face in its entirety. Then I fix up the syntax errors in the @font-face (changing the second "src:url" to just "url" seems to fix it) then I declare the font via the font-family where I want it, so I copy/paste that from the @font-face and add ",Verdana,Tahoma" to the end of it and then it loads beautifully. The full final declaration looks like: font-family: "font-name",Verdana,Tahoma;
CSS is pretty easy, find it much more tolerable than JS but it does have limitations. Like I can't declare a background image in the :before element, and then apply text and expect the :hover properties to look good on top of that, doesn't work that way.
Most of the time it is due to the new code being added conflicting with other pre-established CSS. For example if I try to fix something, say the text of a username won't load, and the only way to fix it is to force a font-size, but other elements are dependent on the same area of code, then whatever font-size I declare would then set the same size for the other elements that borrow from it. It can be tricky sure, it has ways of placing a mental maze for you to work your way around but it is satisfying when you solve it.
Every developer has their own methods to tackling projects. Not a single one is wrong IMO, as long as you're good at it and (to quote Marty McFly) if you put your mind to it, you can accomplish anything.
This was a motherfucker to do but managed to apply a black border around the text by invoking the transparent color gradient in the :after element and using text shadow properties in the :before element and aligning them:
I was testing this out to apply as the default username style but because of the way it invokes the :after element it wouldn't always be perfectly layered.. I'd have to figure out a way for the :after layer to stay in the same position as the :before layer regardless of how many text chars there are. Once I figure that out and it works flawlessly then I can be at peace.