Relative Path Problem

#1

Not sure if the category is right, but anyways.

I’m having problems with grasping relative paths. My CSS file can’t find it no matter what. For example, if my CSS file is located directly in project folder & I set an absolute link to a font I need — everything working perfectly. But when I try to do this with relative path like “./Fondamento/Fondamento-Regular.ttf” than the font stops working.

It’s really frustrating, beat myself up on this topic several hours already. Any help will be appreciated.

Project Path: D:/code/death-grips-tribute
HTML file path: D:/code/death-grips-tribute/index.html
CSS file path: D:/code/death-grips-tribute/styles.css
Font path: D:/code/death-grips-tribute/fonts/Fondamento/Fondamento-Regular.ttf
Editor used: Atom

Working code:

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

Code, that don’t work:

@font-face {
  font-family: fondamento;
  src: url("./Fondamento/Fondamento-Regular.ttf");
}
#2

Hey the ’ . ’ means the current directory which means when you load the index page it checks that directory for the fonts and not the fonts folder

1 Like
#3

So that means that the code above is correct? I thought that the “.” means looking deeper from the file directory.

Also, can you tell me what correct path will be to font, if my CSS file will be in css folder? Like: D:/code/death-grips-tribute/css/styles.css

#4

@font-face { font-family: fondamento; src: url(“/fonts/Fondamento/Fondamento-Regular.ttf”); } add the forward slash here to read from the root directory so it wont matter what folder you’re in .

#5

It’s not working. It just restores itself to default font. Did as you said:

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

The CSS file path is D:/code/death-grips-tribute/css/styles.css

#6

Are you running the files through a local server?

#7

So I took a look at the file setup you’re using , if it’s running on a server the root will point to the particular root folder but in your case root points to the D drive so you have to create your paths relative the folder and navigate to the fonts folder meaning you should use two dots

1 Like
#8

It works! I love you, man. You’re my savior!

Thank you, much love to you.

#9