Font not embedding on website [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.

Closed 9 years ago.

Improve this question

I know this is the most basic of issues but I can't figure out why my font isn't embedding.

CSS:

@font-face
{
font-family:"Moon_Flower";
src: url("assets/fonts/Moon_Flower.ttf") format ("truetype");

}


 html {
         font-family:Moon_Flower;
          background-image:url(../images/background.jpg);
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          font-size: 18pt;
}

Can someone point out to me what I'm doing wrong here? I've checked multiple times and the string should work, it's the same I've used for images only with the "fonts" folder in place of the "images" folder. I tried with a different font also and it didn't work until I had installed it on the laptop.

Thanks for any help

Answer 1

Why don't you try linking to the online ttf file. I found this one - http://www.dafont.com/moon-flower.font

Give this a try. Just make sure you're correctly linking to your files. Drop it into your CSS file.

JS Fiddle

@font-face { font-family: "Moon Flower"; src: url('Moon-Flower.eot'); src: url('Moon-Flower.eot?#iefix') format('embedded-opentype'), url('Moon-Flower.svg#Moon Flower') format('svg'), url('Moon-Flower.woff') format('woff'), url('Moon-Flower.ttf') format('truetype'); font-weight: normal; font-style: normal; } body{ font-family: "Moon Flower"; direction: ltr; }