Search code examples
htmlcssembedfont-face

How do i embed a custom font in CSS?

I have recently been trying to embed font to my website. I don't get it to work, i have watched and read tutorials. I wan't to embed a font called "Ubuntu Light" in ttf format. This is what i have been trying: 

#logBtn{
  font-family: 'UbuntuLight';
}
@font-face{
font-family: "UbuntuLight";
src: url("CSS/Ubuntu-L.ttf");
}

And the file in the folder: Treeview of project

I'm almost new to this, i've been coding HTML and CSS in maybe 4 months now. I have been stuck at this before, and that made me cancel my project, because i gave up. But i don't want to give up again. So i would really appreciate some help! :)

Solution

  • You can embed a font quick and easy by using this code:

    @font-face {
  font-family: 'Name';
  src: url('Font.ext');
  font-weight: 400;
  font-style: normal;
}

    Where Font.ext should be replaced with your font file and its extention (file type) e.g.

    src: url('Ubuntu-L.ttf');

    And the following font-weight and font-style should be referencing the specific font choice.