Social Links Page Challenge Solution

Community feedback

• 

  Alex•3,130

  @Alex-Archer-IPosted 5 months ago

  Hi!

  Basically to use font-face you need just two properties:

  @font-face {
      font-family: "FontName";
      src: url("path/to/font.woff") type("woff");
  }
  

  I can't say why it didn't work in your case, but there are could be two reasons - wrong path or wrong type. As font-face can work without type you can try to remove it. If the font will work, than the type was a problem, if not - try to change path.

  Oh, and a one semantic advice - it's a list of the links here, so it should be ul and li.

  <ul>
      <li><a href="#">I'm a link!</a></li>
      ...
  </ul>
  

  Hope that helps =)

  1

  ---

  

  Rayyan Nafees•30

  @RayyanNafeesPosted 5 months ago

  @Alex-Archer-I Thanks for the semantic list advice.. I just couldn't reset the default css for list items with those.. li::marker css & default indentation so had to try the other way

  The challenges comes with a .ttf font and I added em this way

  @font-face {
      font-family: "Inter";
      src: url("./assets/fonts/Inter-normal,wght.ttf") type("ttf");
  }
  

  But.. upon adding them in CSS the font couldn't load

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 5 months ago

  @RayyanNafees

  Oh, at first, sorry, I mistyped - it's format, not type. And for the ttf fonts you should use truetype value.

  src: url("./assets/fonts/Inter-normal,wght.ttf") format("truetype");
  

  Than, if you are using the same fonts files that provided with starter, there aren't such file as "Inter-normal,wght.ttf" there. It have three static fonts and they are in the static folder, so the path looks like this:

  src: url("./assets/fonts/static/Inter-Bold.ttf") format("truetype");
  

  And one variable font which is just in the "fonts" folder. If you are trying to use variable font, than format("truetype") wouldn't work. Alas, I can't find appropriate format value for ttf fonts so, for now, I can only advice to omit format at all.

  And what about list - you can use lyst-style: none rule to remove markers at all.

  0