CSS font import (2 ways)

there are two ways to import fonts using CSS (that i know of) so i'm gonna try my best to explain both of them with examples + photos

ones easy, but more limited, and the other ones a bit harder but you can get nearly any font

i'll start with the easiest one which is using google fonts and @import

1. choose a font from the google fonts website (in this example i'll use the font 'sedgwick ave display')

2. once you get to a page that looks like this:

just scroll down until you see a heading called "styles" and it should have different styles of the font underneath it (regular 400, bold 100, etc.) and click 'select ____ +' on whatever style you want

3. click the shopping bag button thing in the top right of your screen

4. a window on the right side of your screen should appear, there you need to click on '@import' at the bottom

5. copy and paste both things that pop up into your about me section, including the 'CSS rules to specify families', you have to make sure that they are both in between the <style> and </style> or else it won't work, and put where it says 'font-family: '___', __;' inside a { and } with the word 'body' behind it (theres an example after this is if you don't understand what i mean)

the end code should end up looking something like this:

<style>

  @import url('https://fonts.googleapis.com/css2?family=Sedgwick+Ave+Display&display=swap');
body { font-family: 'Sedgwick Ave Display', cursive; }

</style>

!! the following has to do with BOTH import options !!

although, the 'body' makes it so everything in your profile is that same font, if you want the font to just apply to one thing you need to find the selector (the thing before the code inside { })

if you wanna just make it your display name then the selector would be '.profile h1' (it'd look like this -- .profile h1 { font-family: 'Sedgwick Ave Display', cursive; }, just you you can get the idea of selectors lol)

oorr if you want it just be headings you can make the selector '.headings'

i would explain how to make it any specific part of text but i cannot physically explain that no matter how hard i try to, but those 3 are the probably main ones you're gonna use

2ND WAY -- @font-face USING DROPBOX

i need to add that this one is only usable on laptop/computer to my knowledge (SORRY MOBILE USERS) and that it includes downloading fonts from other websites

1. much like the first way, find a font - just this time it can be from anywhere that has font downloading options (i'd recommend using dafont) and download the font

2. go onto a website called dropbox and sign up for it (ik its annoying to sign up for things sorry, its outta my control 😔), once you do that upload the file into it

3. once it's done uploading, click on it - it should either be a zip folder (has multiple options inside like this: (sometimes it isn't multiple options, just one)

OR it could go straight into the font itself, like this:

if it went straight into the font (you can tell by whether or not it has the option to extract the files), then you can skip to step 6, if not then it's a little more work

4. click on the one that ends with either '.ttf' or '.otf', there sometimes might be multiple that end with it but it doesn't really matter which one you choose, when you're in your page should look like this

5. from there, click on 'extract all' at the top of the page, then open up the extracted version of the files and click back onto the one that you clicked on before (again, making sure it ends with .ttf or .otf)

6. here it'll open into the almost the same thing it showed before, just without the option to extract it, just click on 'copy link' and copy the link

7. the start of the link is unnecessary, so just keep the bit after https://www.dropbox.com/scl/fi/

example:

https://www.dropbox.com/scl/fi/gdo2r8da2x4anon4bbu9u/CHERI___.TTF?rlkey=jnb1m52gd0slnacod426ylm12&dl=0

(the bold bit is the part you want to keep)

8. in your about me, as always, start the code with <style>, after that add in

@font-face { font-family: '(name of your font)';
src: url(https://dl.dropbox.com/s/(the part of the link you kept));

(note the apostrophes after font-family:, it won't work if you don't add them)

9. now the font is officially imported, so you just need to actually add it into a selector using the same method i stated before, making sure that the font family names are both the exact same

10. end your code with </style> and you're done :D

heres an example:

<style>

@font-face { font-family: 'black demon'; 
src: url(https://dl.dropbox.com/s/ydyn9hfembtiqtwpuqds8/Black-Demon.otf?rlkey=szwctuippalpq3b3tlauasjmc&dl=0); 
} 

body { font-family: 'black demon'; }

</style>

PLEASE LET ME KNOW IF THIS DOESN'T MAKE SENSE

i'll try my best to word things better 2 u :))