Font CSS Help

Hey there! I saw your comment on my guestbook, and since you asked about how to add custom fonts. So, I thought I'd leave a quick tutorial here X)

1. You'll want to find what font you want to use. Google Fonts is usually a good place to get them.
2. Make sure that it's a TTF file! Technically, you can use woff or other font file formats, but I have had trouble getting them to work for whatever reason. I suggest using a TTF file just while you figure it out.
3. Upload it to your site. I have mine font file in a subfolder called "Fonts" in my main folder where I store all my files for the website that aren't actual HTML pages. (So, the path to it is /1/Fonts/rainyhearts.ttf)
4. In your CSS sheet, you'll need to that it knows that the font exists, where to find it, and where to use it. Here's a template/example:

@font-face {
    font-family:'NameOfYourFont';
    src: url(path/to/your/font.ttf);
    font-weight: normal;
}

html {
  font-family:'NameOfYourFont';
}

Since the font family is applied to the HTML tag, it'll apply it globally to the HTML page. You can set it up so you have two different fonts, and apply them differently to different tags. This is how mine looks:

@font-face {
    font-family:'RainyHearts';
    src: url(/1/Fonts/rainyhearts.ttf);
    font-weight: normal;
}

html, body {
  font-family:'RainyHearts';
}

(I removed some stuff from the HTML/Body part of the CSS because it wasn't relevant, but you can always go into inspect elements and look there, lol)

I hope this helps!