Ok figured it out. for anyone wanting to do this, the key is using a CSS style sheet. don't let it intimidate you. it's not that bad.. basically:
1. import your ttf font
2. add a stylesheet in the file area
3. past something like this in there (in my case i had a list i wanted to customize and it not be clickable
#mypeerlist {
text-align: left;
font-size: 30px;
font-family: Perfect_DOS_VGA_437;
user-select: none;
cursor: default;
pointer-events: none;
}
4. watch this video, he explains it mostly. the only thing he leaves out is actually showing the font importing part. youtube.com/watch
5. just make sure the #mysheet matches the tag in the object you want to effect (without the #)