Html Question posted in
Some basic documentation can be found here.

Html – Need Help Displaying Custom Fonts in CSS

there, any idea why the above problem isn’t working? I have Live Server enabled, downloaded the ‘Daniel’ and ‘Comfortaa’ fonts from dafont for use in this project, yet neither shows up in my browser (Chrome – I also tried Brave, same result).

Here’s my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Test</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>hello</h1>
  <p>Paragraph asdfsadf</p>
</body>
</html>

And my CSS:

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

@font-face {
font-family: 'comfortaaBold';
src: url(Comfortaa-Bold.ttf);
};

h1 {
font-family: 'daniel';
};

p {
font-family: 'comfortaaBold';
};

So yeah basically the fonts do not show up in my browser and I don’t understand why. Oddly enough, when I comment out my @font-face instructions, the daniel font only does show up (which I don’t understand — wouldn’t that need to be active for the font-family instruction to work?), and the comfortaa one does not. Any thoughts on what’s going on here?

I tried switching browsers and even exiting VS code altogether, resetting my computer, nothing changed it.

Tags:

2

Answers


  1. 0

    Not a full answer, but check your directory lines up for the fonts relative to your css file i.e :

     @font-face {
  font-family: futura-bold;
  src: url("./assets/fonts/Futura-bold.ttf");
}
    Login or Signup to reply.
  2. 0

    you have to import other font formats.
    if you can not find other formats you can use convertors to convert your ttf to another formats

    @font-face {
    font-family: 'daniel';
    src: local('daniel'),
    url('../fonts/ttf/daniel.ttf') format('ttf'),
    url('../fonts/woff/daniel.woff') format('woff'),
    url('../fonts/woff2/daniel.woff2') format('woff2'),
    url('../fonts/otf/daniel.otf') format('otf'),
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search