@Alex-Archer-I
Posted
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 =)
@RayyanNafees
Posted
@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
@Alex-Archer-I
Posted
@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.
