Adding a font to my website

Help
1

I downloaded rainyhearts.ttf into my neocities file editor, but I’m not sure how to apply the font to my site, even after looking at tutorials. Please show me exactly what the code should look like.

2

@Manatee, this should work:

@font-face {
  font-family: 'RainyHearts';
  src:  url('rainyhearts.ttf') format('truetype');
}

body {
  font-family: 'RainyHearts', sans-serif;
}

The code above assumes that your font file is in the same folder as your stylesheet.

4 Likes
3

Beyond this, if you need multiple weights, you can repeatedly use the @font-face section for each font file and specify the font-weight you want it to be associated with (or even with an italic).

@font-face {
 font-family: "Melvian Sans";
 font-weight: 400;
 src: url("/assets/fonts/MelvianSansWeb-Regular.woff2");
}

@font-face {
 font-family: "Melvian Sans";
 font-weight: 400;
 font-style: italic;
 src: url("/assets/fonts/MelvianSansWeb-Italic.woff2");
}

@font-face {
 font-family: "Melvian Sans";
 font-weight: 700;
 src: url("/assets/fonts/MelvianSansWeb-Bold.woff2");
}
1 Like