How can I embed custom fonts? - ☔︎ ∙ I need Help! - MelonLand Forum

How can I embed custom fonts?
Posted by Gizmo on a Spring day

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?

#1 Reply
Posted by Dan Q on a Spring day
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!)

#2 Reply
Posted by ヤーナム on a Spring day
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.

#3 Reply
Posted by Dan Q on a Spring day
@ヤーナム 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!

#4 Reply
Posted by ヤーナム on a Spring day
We posted .13 beats apart my friend! haha. Agreed about the absolute path being easier to reason about. :)

#5 Reply
Posted by Gizmo on a Spring night
Quote from: Dan Q on a Spring day
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 a Spring day
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!

#6 Reply
Posted by Dan Q on a Spring night
Quote from: Gizmo on a Spring night
https://gizmoswebsite.net/ looks like this image on my screen.

I'm in the UK so I can't see that screenshot (Imgur isn't available here.) But I'm glad things are working for you now!