@font-face doesn't work the font does not changes

user_13906819 0
Viewed 60

Everything works except that the font does not changes. I dont know if the problem its about the path relative of the font or my syntax or script is not right. Folders structure

My Html code:

<head>
<link rel="stylesheet" type="text/css"  href="styles/mystyle.css">
</head>
<body>
<div class="text">
      <h1>lorem ipsum.</h1>
      <p>Consectetur adipiscing elit.
      Nulla condimentum tortor sem,
      in semper nisl bibendum eu.</p>
    </div>
</body>

/* My css code: */

@font-face 
{
  font-family: "myFirstFont";
  src: url(test-site\fonts\Gotham-Book.otf) format('opentype');
}

.text p
{
  font-size:1vw;
  font-family:myFirstFont;
  color:#f2f2f2;
}
fonts css html
1 Answers

Replace the backslash (\) in the font url with either two backslashes (\\) or one forward slash (/).

If you use one backslash, it will be recognized as an escape character, a character that invokes an alternative interpretation on subsequent characters in a character sequence.

So your code should look like this:

@font-face 
{
    font-family: "myFirstFont";
    src: url(./fonts/Gotham-Book.otf) format('opentype');
}
user_127861970
Related