Font-Face Frustration

[WhiteFelineWonder]

As much as I like the Comic Sans font, I'm now finding myself wanting a font that'll show not just on my laptop but also mobile and other devices, that way the little extra personality flavor can still be around. Was told about font-face, but I'm having trouble understanding it...

Anybody got some tips or some useful notes I should know about this? Also, I figured I'd also bring up this:
I have a line in the body bracket of my style.css file for my site that calls for the Comic Sans font. Considering that I used to be on Neocities before December 2024, I don't know whether to keep that there or remove it entirely in favor of font-face since I haven't touched that part much.

Extra little bit: I'm going the "have the file in your site" route.

Any notes and useful tidbits much appreciated!

[fairyrune]

i know the feeling... here is what mine looks like.

in my css, i have this at the top, using cinni's pixel basiic (the font i use now!) as an example.

Code

@font-face {
  font-family: "basiic";
  src: url("/fonts/basiic.ttf");
}

now when i use a div, i can specify what font family i want to use by plugging in "basiic"!

Code

.page {
  font-size: 13px;
  font-family: "basiic";
}

what does your code look like when you put it in? also, what editor do you use/how do you preview the result? i had a bit of an issue with my editor (phoenix code) and its live preview not showing the font unless i used catbox, for some reason...

[WhiteFelineWonder]

The only editor I've ever really used is the one built into Nekoweb (and Neocities when I used to be there before switching). I did try VSCodium a bit at one point.

The part that has the callback to Comic Sans is at the top of the file and it looks like this:

Code

body {
  background-color: darkslateblue;
  color: white;
  font-family: 'comic sans ms', sans-serif;
}

Is there more to this than just inserting a few lines into the CSS? Like is there an HTML part to this?
I'm even checking with the guide that's on Sadgrl but I'm not seeing anything on the HTML part.

[cyberfun1 (dizz)]

Oh its really easy. At the beginning of the CSS doc, you insert this:

Code

@font-face {
  font-family: "FamilyName";
  src: url("https://www.website.com/fontfile.xxxx");
}

Then whichever part you want the font to apply to, you add some code like this

Code

  font-family: "FamilyName";
  font-style: normal;
  font-weight: ###px;
  font-size: ###px;
  src: url("https://www.website.com/fontfile.xxxx") format('truetype/opentype/etc.');
}

[WhiteFelineWonder]

Wait what about the line that calls for Comic Sans that's in the body section of my file? Do I have to remove it or leave it alone?

Also does the second code box go in HTML files or is it still in CSS?

[cyberfun1 (dizz)]

Wait what about the line that calls for Comic Sans that's in the body section of my file? Do I have to remove it or leave it alone?

Also does the second code box go in HTML files or is it still in CSS?

You can keep that line. Dunno if it needs the serif or sans serif thing cuz ive never used that. And yes, the 2nd code box goes in CSS too. If you want more reference you can always look at my website for help.

[WhiteFelineWonder]

Finally was able to get custom fonts working, thx. Boy oh boy this mind blank....

Now's to just find a font that I can stick with...

[pyrrhic7]

You can keep that line. Dunno if it needs the serif or sans serif thing cuz ive never used that.

Adding serif, sans-serif, etc. to the end of a font-family property declaration is just informing the browser what "generic" font to use if for whatever reason someone viewing your page can't access the quoted font. It's the fallback that will simply pick a similar system font! You can actually pick from a plethora of generic family names (like fantasy, see Mozilla's reference page). Without specifying a generic font, it probably defaults to Times New Roman or something

Side note you can list fonts that'll be tried in succession, like

Code

font-family: 'comic sans ms', Verdana, sans-serif;

But I just stick with 2: my primary font and the closest-matching generic font.