CODEWITHSUNDEEP
htmlcssfonts
Alex T
Alex T

Reputation: 1

cant use fonts in fonts directory

I have inserted the fonts but I can't see them. I don't know why there is no space in between the words.

<html>

<head>
  <link href="app.css" rel="stylesheet" />
</head>

<body>
  <header>
    <div class="container">
      <div id="topbar">

      </div>
      <nav id="main">
        <a href="/" id="logo"><img src="logo.svg" alt="logo"></a>


        <ul id="main-menu">
          <li><a href=""></a>Η ΟΜΟΣΠΟΝΔΙΑ</a></li>
          <li><a href=""></a>ΑΡΚΑΔΩΝ ΕΡΓΑ</a></li>          
          <li><a href=""></a>ΕΠΩΝΥΜΟΙ ΑΡΚΑΔΕΣ</a></li>
          <li><a href=""></a>ΝΕΑ - ΕΝΗΜΕΡΩΣΗ</a></li>
          <li><a href=""></a>ΕΠΙΣΚΕΨΗ ΣΤΗΝ ΑΡΚΑΔΙΑ</a></li>
          <li><a href=""></a>ΑΝΑΖΗΤΗΣΕΙΣ ΣΤΗΝ ΑΡΚΑΔΙΑ</a></li>
        </ul>

      </nav>
    </div>
  </header>

</body>

</html>

@font-face {
  font-family:Proxima Nova ;
  src: url(./fonts/Proxima\ Nova\ Regular.otf);
  font-weight: normal;
}
@font-face {
  font-family:Proxima Nova ;
  src: url(./fonts/Proxima\ Nova\ Bold.otf);
  font-weight: bold;
}
@font-face {
  font-family: SourceSansPro ;
  src: url(./fonts/SourceSansPro-Regular.ttf);
  font-weight: normal;
}
@font-face {
  font-family: SourceSansPro  ;
  src: url(./fonts/SourceSansPro-Bold.ttf);
  font-weight: bold;
}
body {
    margin: 0;
  font-family: 'SourceSansPro-Regular', serif;
  }
  
  header {
    background: url('./images/bg.png') bottom center no-repeat;
    background-size: cover;
    height: 750px;
  }
  
  #topbar {
    height: 70px;
    text-align: center;
  }
  
  nav#main {
    background-color:white;
    border-radius: 4px;
    height: 60px;
    position: relative;
  }
  
    #logo{
    position: absolute;
      display: block;
    border: 10px solid #AB0427;
    border-radius: 100%;
    left: 50px;
   top: 50%;
  transform: translateY(-50%);
  }
   #logo img{
   display: block;
   }  
   .container{
    width: 1360;
    margin: 0 auto;
   }
#main-menu{
margin: 0;
padding: 0 20px 0 320px;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
list-style: none;

}
#main-menu a {
color:#002868 ;
font size: 14px;
font-weight: bold;
}

Upvotes: 0

Views: 72

Answers (2)

nxt
nxt

Reputation: 436

Try Using Formats and make sure the path is correct

Note: Remove the spaces if there are no spaces is in the filename, change the backward slash into forwarding slash

@font-face {
  font-family:"Proxima Nova" ;
  src: url(./fonts/Proxima/Nova/Regular.otf) format("opentype");
  font-weight: normal;
}
@font-face {
  font-family:"Proxima Nova";
  src: url(./fonts/Proxima/Nova/Bold.otf) format("opentype");
  font-weight: bold;
}
@font-face {
  font-family: "SourceSansPro";
  src: url(./fonts/SourceSansPro-Regular.ttf) format("truetype");
  font-weight: normal;
}
@font-face {
  font-family: "SourceSansPro";
  src: url(./fonts/SourceSansPro-Bold.ttf) format("truetype");
  font-weight: bold;
}

Upvotes: 1

Vincent M
Vincent M

Reputation: 166

Looks like you have backslashes in the urls of the top two. I'd check to make sure the filepath is correct, that may be part of the problem. Additionally, you could try to add a format property like so:

@font-face {
  font-family: Proxima Nova ;
  src: url(./fonts/Proxima/Nova/Regular.otf) format("open-type");
  font-weight: normal;

Upvotes: 0

Related Questions