How do i embed a custom font in CSS?

Question

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! :)

I really recommend using google.com/fonts This includes the font you currently need and thousands of others, I've not looked but it it because you're importing the font AFTER it being used? - Also try removing the single-apostrophe — ConorReidd
– ConorReidd, Commented May 12, 2016 at 19:31
Did you convert the font via a webfont generator such as fontsquirrel.com/tools/webfont-generator before adding it to your project? — drip
– drip, Commented May 12, 2016 at 19:37

Tanasos · Accepted Answer · 2016-05-13 14:12:21Z

4

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.

edited May 13, 2016 at 14:12

answered May 13, 2016 at 13:41

Tanasos

4,1285 gold badges36 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tobias Rasmussen Over a year ago

But, it does not work. Could you please see what i have done wrong? This is the code:

#logBtn{   font-family: "UbuntuL";   font-size: 30px;   color: white; }  @font-face {   font-family: 'UbuntuL';   src: url('UbuntuL.ttf');   font-weight: 400;   font-style: Light; }

Maybe easier to see here: i.gyazo.com/f1d365053f57ade7476bb886b1f34b86.png

Tanasos Over a year ago

Your font-face declaration should always be at the top of your CSS file, @SynomousArtz

jeffjenx · Accepted Answer · 2016-05-12 19:41:04Z

0

The url(...) path is relative to the stylesheet.

Therefore, because your stylesheet is in the CSS folder you don't need to include that in the url:

@font-face{
  font-family: "UbuntuLight";
  src: url("Ubuntu-L.ttf");
}

answered May 12, 2016 at 19:41

jeffjenx

17.6k6 gold badges63 silver badges104 bronze badges

Collectives™ on Stack Overflow

How do i embed a custom font in CSS?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related