Question

I am having trouble using the @font-face tag in my CSS to use custom fonts. I have a folder called Project inside it are the folders fonts, css, and images. I am trying to use the @font-face to use a custom font.

Here is my code:

The HTML – index.html

<div id="hello">Hello</div>

The CSS – css/typography.css

@font-face{
font-family: 'ranger';
src: url('fonts/Ranger.ttf');
}

#hello{
font-family: 'ranger';
font-size: 70px;
color: white;
text-align: center;
padding-top: 30px;
white-space: nowrap;
}

I am using this for multiple other fonts, they all work except for two of the other fonts. There are no differences in the code or the font file types. For one of the fonts, it is using the regular type face instead of the one I am specifying. The other is just using the browser default. These two fonts worked this morning until I moved all my CSS into its own folder, and all the fonts into their own folder.

Please help! I am very new to CSS/HTML so I really do not understand this at all.

Answer 1

Your path is wrong. Since your CSS file is in /css/, you have to go up a directory to access /fonts/.

@font-face{
    font-family: 'ranger';
    src: url('../fonts/Ranger.ttf');
}