How i used my own fonts (outside of google fonts) for use on my profile

TL;DR - you gotta host your font files somewhere else and use the "font-face" CSS rule.

this article is not reccomended to be followed at all if you do not know programming in general, or you don't know how REST APIs work.

So, i wanted to style my profile with a sonic unleashed UI look... but the fonts that game uses are not available for remote use on somewhere like google fonts, i can only download them, but you can only load fonts remotely on spacehey.

so... how do i put my own fonts?

lets look how google fonts works, which is your typical place to import fonts remotely. you would  normally import a font like this:

y'all are probably used to stuff like this. however, have you ever stopped to ask yourself what exactly IS in that url? how does that work?

let's try putting it on our browser and see what we get:

a whole-ass CSS snippet, importing every weight of that font! so basically, you were importing an external CSS file this whole time.

this is important. remember this.

yeah, alright, but where is the font file being imported from, then? you cant just give a font to a website with pure CSS.

take a peek at the "src" property on every one of them.

wait, what is that? a .woff2 file?
yeah! google hosts the files and gets them from there, so we just import the "prepared" css and don't really care for the file when we use it.

what if we could host our own files and prepared css, just like google?

IT'S PROGRAMMING TIME

I'm pretty familiar with how backend services work, so i went with my own Node.js little server and deployed it on Vercel. here's how the files look:

a lot of those things are more config-specific. the important stuff is in the api folder.

first, an index.js file, which basically starts the server. and the public folder (the one inside api, the one outside is because vercel will not work without that folder alone for some reason. theres only a .gitkeep file inside it)

the public folder will contain files that we want to get access remotely. and you can see the fonts in there, as well as a little css file, just like google fonts!

lets see what do we have in the index.js:

we start the app by first setting cors(). this is needed or else we're gonna get errors.

then, we set the static folder! we tell express that we want it to be the current folder that file is working on (__dirname), in the 'public' directory.

that means that if we go to where i put my server on, and put "/filename.jpg" after the URL, it will return me that file! example: going to https://maciel-spacehey-files.vercel.app/seurat-m.otf will download the font for you. this is great!

but why stop there? now we can replicate google fonts' behaviour by creating our own fonts.css file in the public folder!

now, when i want to use these fonts, i can import them FROM MY OWN SERVER!!!

and that's how i did it for my two font families that i wanted to use in my profile. if you can somehow pull this trick off, i highly recommend doing so to make your profile more stylish! :D

thanks for reading!!