Custom Fonts Not Working

Coding Help
1

I’ve uploaded some custom fonts to Glitch and none of them worked on the site. To make sure it wasn’t an error in my code, I’ve downloaded the project and opened index.html and noticed that it worked just fine, so I have no idea what’s going on.

1 Like
2

Welcome to the community! Could you please share the logs with us?

3

Simply do something like this:

@font-face {
font-family: 'yourname';
src: url('/path/to/font')
}

Then use it in your code:

elem {
font-family: 'yourfont', sans-serif;
}
1 Like
4

If you are in the assets, DO NOT USE:

@font-face {
  font-family: 'myFont';
  src: url('/assets/myFont.ttf')
}

use:

@font-face {
  font-family: 'myFont';
  src: url('cdn.glitch.me/myFont.ttf') 
  /*The link to the CDN appears when you click on your file in assets > copy*/
}

I think this would be the solution

1 Like
5

Yeah that would be right since it worked when you download the project which means you’re probaly serving the fonts from a folder in your project.
Keep in mind if you load something through the url “font/this.woff”
When the user launches your site through yourdomain.glitch.me the font is fetched from yourdomain.glitch.me/font/this.woff
When the user launches your site through yourdomain.glitch.me/index.html the font is fetched from yourdomain.glitch.me/index.html/font/this.woff
It would probaly be better if you showed us your folder structure, and expanded your font folder

6

I don’t have a dedicated font folder because I only have one custom font uploaded, so index.html, my font, and style.css are all in one folder.

7

I used the terminal to extract the font from my assets so its in the same folder as index.html and style.css, but I’ve tried using both the local url and the url I copied from assets. Neither of them worked.

9

Can you show us your code?

10

index.html:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <link href="style.css" rel="stylesheet">
      </head>  
      <body>
        Hello
      </body>
    </html>

style.css:

    @font-face {
      font-family: "Minecraft";
      src: url("Minecraft.ttf");
    }
    body {
      font-family: "Minecraft";
    }

When I run the site, it should show “hello” in a Minecraft font, but it just shows it in whatever the default font is.

1 Like
11

All of the file names are correct, I’ve made sure of that.

12

The “Hello” in the site is going to be there only until I get the font working, then I’ll start actually making the site.

13

Hey brodiedude,

Try opening the DevTools console on your webpage with F12 and check on the Network tab that the font is being fetched correctly without a 404 error.

I’ve got a working Glitch of a custom font demo, but I used otf not ttf. Don’t know if that’s making a difference. You could try remixing it then changing the files.

Note that it’s working on your machine (probably) because you already have the ‘Minecraft’ font installed, so it uses the installed font file instead of the CSS one.

Post your Glitch here if you can, then we can test it? :slight_smile:

Good luck :+1:

1 Like
14

I don;t think the assets folder exists if you do ls -la

15

The console said
Failed to load resource: the server responded with a status of 500
and the “resource” was the font

16

Also the project invite is waiting for approval so that may take a while to post.

17

Don’t need an invite, just wanna read it. Post the glitch ~ project-url :slight_smile:

Check that you downloaded the font properly in the terminal with wget and perhaps try that process again. Can you post the terminal command you used?

18

Project url: https://glitch.com/~mcguide

commands:

wget -O file.zip https://cdn.glitch.com/ad271fae-72ab-497f-9aa4-abf2bc3f6b25%2Fminecraft-font.zip?v=1602004015859\
unzip file.zip
refresh

idk why the colors are all weird, but those are the commands I used

19

I put the fonts in the “fonts/” folder and it fixed the problem. Thanks!

1 Like
20

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.