How can I embed custom fonts?

Gizmo
Jr. Member ⚓︎

⛺︎ My Room

Guild Memberships:

Artifacts:

How can I embed custom fonts?

« on: Today at @757.86 »

I use a custom font on my website, but I noticed recently that it wasn't showing up on the Neocities preview page, and it disappeared in my browser when I deleted the font from my computer. I followed this tutorial, put this in my style.css:

Code

@font-face {
    font-family: Bradley Hand ITC;
    src: url(../../assets/misc/Bradley Hand ITC TT Bold.ttf);
}

and this in my index.html:

Code

<head>
<link rel="stylesheet" href="assets/code/css/style.css">
<meta charset="utf-8">
</head>
<style>
.wrapper {
    width: 90%;
    background-color: #c7ae68;
    margin: auto;
    border: 5px solid black;
    font-family:"Bradley Hand ITC",sans-serif;
    padding: 10px;
}
</style>

How can I get it working?


	Logged

Dan Q
Hero Member ⚓︎

I have no idea what I am doing
⛺︎ My Room
RSS:

Guild Memberships:

Artifacts:

The Worm is creeping around Melonland profiles!

Re: How can I embed custom fonts?

« Reply #1 on: Today at @767.84 »

I can't find the page on your website that's affected, but I've got a few guesses from the code alone.

My biggest guess would be that your path is wrong. Try this:

Code

@font-face {
  font-family: Bradley Hand ITC;
  src: url("/assets/misc/Bradley Hand ITC TT Bold.ttf");
}

I've made two changes there. First, I swapped out the ../../ soup for a /. / means "from the root of my site", which is much better shorthand than ../ for every directory you need to go "up" (for which I think you miscounted how "deep" in directories your CSS file was. Switching to / means it works no matter where you move your CSS file, which is much tidier.

Second, I added quotation marks so that a browser can't mistakenly assume the URL is "/assets/misc/Bradley" and ignore the rest. If your URL has spaces, CSS ought to reference it with quotation marks or else use URL-encoding. Or, better yet, avoid spaces in Web filenames: they're nothing but trouble!

A final possibility to consider might be the way that the Neocities preview page is generated. I'm not familiar with it, but I assume they have an automated browser that visits sites and takes screenshots. It's possible, but unlikely, that the preview generator is configured not to download TTF fonts but only other font formats like WOFF and WOFF2. Once you've tried everything else (above), if it's still not working, perhaps consider converting your font to WOFF or WOFF2; they result in smaller, Web-friendlier files!

That'd be my guesses, but if you share URLs of troublesome pages and where you're seeing them incorrectly-previewed, I can take a deeper dive!

By the way (ninja edit!): have you checked that the font works properly in browsers? Crucially, have you tried this on a computer that doesn't already have that font installed! If your computer has that font generally-available, then it's not a fair test because it'll always work for you, even if the @font-face { src: ... } is broken. (This is also part of why I asked for a URL of a page that you think "works" for you!)


	Logged

Artifact Swap:

ヤーナム
Jr. Member

hanging out on AIM
⛺︎ My Room

Guild Memberships:

Artifacts:

Re: How can I embed custom fonts?

« Reply #2 on: Today at @767.97 »

It's probably an issue with the path to the font file, which is relative to the CSS. I'm guessing your files look something like this?

Code

index.html
assets/
  code/
    css/
      style.css
  misc/
    Bradley Hand ITC TT Bold.ttf

In which case you want to specify your font path like this:

Code

@font-face {
  font-family: "Bradley Hand ITC";
  src: url("../../misc/Bradley Hand ITC TT Bold.ttf");
}

You have an extra "assets" in there.


	Logged

Dan Q
Hero Member ⚓︎

I have no idea what I am doing
⛺︎ My Room
RSS:

Guild Memberships:

Artifacts:

Re: How can I embed custom fonts?

« Reply #3 on: Today at @770.06 »

@ヤーナム has it! But yeah, I'd still use / rather than ../../ - it's shorter, it's clearer, and it works if you ever move your CSS file to a different directory later!


	Logged

Artifact Swap:

ヤーナム
Jr. Member

hanging out on AIM
⛺︎ My Room

Guild Memberships:

Artifacts:

Re: How can I embed custom fonts?

« Reply #4 on: Today at @772.47 »

We posted .13 beats apart my friend! haha. Agreed about the absolute path being easier to reason about. :)


	Logged

Gizmo
Jr. Member ⚓︎

⛺︎ My Room

Guild Memberships:

Artifacts:

Re: How can I embed custom fonts?

« Reply #5 on: Today at @798.55 »

Quote from: Dan Q on Today at @767.84

I can't find the page on your website that's affected, but I've got a few guesses from the code alone.

My biggest guess would be that your path is wrong. Try this:

Code
@font-face {
  font-family: Bradley Hand ITC;
  src: url("/assets/misc/Bradley Hand ITC TT Bold.ttf");
}
I've made two changes there. First, I swapped out the ../../ soup for a /. / means "from the root of my site", which is much better shorthand than ../ for every directory you need to go "up" (for which I think you miscounted how "deep" in directories your CSS file was. Switching to / means it works no matter where you move your CSS file, which is much tidier.

Second, I added quotation marks so that a browser can't mistakenly assume the URL is "/assets/misc/Bradley" and ignore the rest. If your URL has spaces, CSS ought to reference it with quotation marks or else use URL-encoding. Or, better yet, avoid spaces in Web filenames: they're nothing but trouble!

A final possibility to consider might be the way that the Neocities preview page is generated. I'm not familiar with it, but I assume they have an automated browser that visits sites and takes screenshots. It's possible, but unlikely, that the preview generator is configured not to download TTF fonts but only other font formats like WOFF and WOFF2. Once you've tried everything else (above), if it's still not working, perhaps consider converting your font to WOFF or WOFF2; they result in smaller, Web-friendlier files!

That'd be my guesses, but if you share URLs of troublesome pages and where you're seeing them incorrectly-previewed, I can take a deeper dive!

By the way (ninja edit!): have you checked that the font works properly in browsers? Crucially, have you tried this on a computer that doesn't already have that font installed! If your computer has that font generally-available, then it's not a fair test because it'll always work for you, even if the @font-face { src: ... } is broken. (This is also part of why I asked for a URL of a page that you think "works" for you!)

Quote from: ヤーナム on Today at @767.97

It's probably an issue with the path to the font file, which is relative to the CSS. I'm guessing your files look something like this?

Code
index.html
assets/
  code/
    css/
      style.css
  misc/
    Bradley Hand ITC TT Bold.ttf
In which case you want to specify your font path like this:

Code
@font-face {
  font-family: "Bradley Hand ITC";
  src: url("../../misc/Bradley Hand ITC TT Bold.ttf");
}
You have an extra "assets" in there.

Using "/" to set an absolute path didn't work, but reformatting the relative path as "src: url("../../misc/Bradley Hand ITC TT Bold.ttf");" did! Initially it was working in my browser, however I deleted the font on Windows to see if it was being pulled properly, which is when I was discovered the bug. I also swapped the font and converted it to WOFF2. https://gizmoswebsite.net/ looks like this image on my screen. Thanks a lot to both of you for the help! I really appreciate it!