How to customize your profile with fonts from your computer!

So... I tried looking for a tutorial that showed how to do this for my friend and somehow all of them got removed. So I'm making my own lol

">

Anyways, here's how!

Step 1: Host your font file on the internet

When you import a font using CSS, you're making it so the code relies on an resource outside of the CSS code itself, in this case a font file. If you simply import the file from your computer, people across the net can't access the font file because well... they don't use your computer lol

How do we fix this? Well, instead of using the font file hosted on your computer, get the CSS to use a copy of the file hosted on the internet! But we have to host the file in the first place lol

There are two ways you can go about this:

• Online file hosting sites

You can use sites like https://catbox.moe/ which I use often! Just upload the file, copy the link and you're done! But make sure to use the direct file link!

• Dropbox

If you want more personal control of your font file hosted online, I'd suggest you sign up for a Dropbox account and follow these steps to get a direct file link!

First, upload your file to your dropbox account.

Second, copy your file's link. 

Make sure the link is accessible to anyone and not restricted to just selected users! It needs to be public to work. It should look kinda like this (keep in mind the dark red part, you'll need to change that later with something else):

https://www.dropbox.com/scl/fi/kwddbflwpv6cxp7hy5kig/omekashi_font.ttf?rlkey=ppi952qcul2b5o3jely8toisp&st=88qf99qh&dl=0

Third, change the url as shown here:

https://dl.dropbox.com/scl/fi/kwddbflwpv6cxp7hy5kig/omekashi_font.ttf?rlkey=ppi952qcul2b5o3jely8toisp&st=88qf99qh

If you're not sure what just changed, allow me to explain here:

• www.dropbox.com is changed to dl.dropbox.com

• &dl=0 at the back of the url is deleted, which allows the file to be accessed as is

The example link I've given there is for the Omekashi font which I use on my profile. It's hosted on my dropbox, but feel free to use it for yourself if you think it's cute!

Now that you have your link, you should be ready to get to the next step BUT WAIT! Are you sure the link you have is your direct file link?

If you're not well versed in basic web dev, you might wanna follow this step! All you need to do is copy your url and paste it into your browser's url bar.

If your font file immediately starts downloading from the site or your computer asks permission to download the font file, congrats! You've got your url and we can proceed.

If that doesn't happen...

• If you're using a file hosting site:
  

Ensure that your link ends with, or contains near the end, the file format of your font file like .ttf or .otf. If it doesn't, sorry to break it to you buddy but that's most likely not the direct file link :/

You'll need to refer to the specific website you're using to find out how to get the direct file link.

• If you're using dropbox

Make sure your link is correct. Nowadays, dropbox creates a long randomly generated code for every file link. Try copying the link again and repeating the steps while being careful not to delete anything that shouldn't be deleted, especially the rlkey as it's essentially for the file to be accessed!

Now that our troubleshooting is done, let's move on to the next step.

Step 2: Import your font into your CSS code

Now you need to import your font file into your code! It's kinda like installing the file into your code to be used later, like loading some materials into a factory so their ready to be used.

Here's what the code should look like, place this at the very top, right under the <style> opening tag:

@font-face {

    font-family: '[insert name here]';

    src: url('[insert direct link here]');

}

Now here's an explanation of the two parts in case you don't understand:

• font-family: '[insert codename here]';

This is like a codename for your font. You can make it anything you'd like but I highly recommend it be one short word with only lower case letters, because it'll be easier to reference that way. This will be placed in the font-family parameter of any text you want to place the font. Make sure you type it exactly as you wrote here when you reference it!

• src: url('[insert direct link here]');

This is self-explanatory. Just paste the direct link we looked for in step 1!

REMEMBER! The quotation marks ('') are absolutely important!!

Let's get to the next step!

Step 3: Apply the font to your text

We're finally at the stage we came here for! Now you can use the font!

All you need to do is find your text and insert this right here into the p tag:

<p style = "font-family: '[insert codename here]';">

Or the a tag:

<a style = "font-family: '[insert codename here]';">

Or the span tag too!:

<span style = "font-family: '[insert codename here]';">

If the element has text, you can definitely use this! Just insert this into the opening tag between the pointy/angle brackets (<>) and after the tag name (p, a, span, etc.):

style = "font-family: '[insert codename here]';"

Let's see an example:

Hello!

And here's the code:

<style>

@font-face {

    font-family: 'Ome';

    src: url('https://dl.dropbox.com/scl/fi/kwddbflwpv6cxp7hy5kig/omekashi_font.ttf?rlkey=ppi952qcul2b5o3jely8toisp&st=88qf99qh');

};

</style>

<p style = "font-family: 'Ome';">Hello!</p>

Welp, that's basically it!

Again, hope this is helpful! Get creative and go crazy!!!(⁠ﾉ⁠◕⁠ヮ⁠◕⁠)⁠ﾉ⁠*⁠.⁠✧