CODEWITHSUNDEEP
htmlcssfonts
Sleepyfalcon
Sleepyfalcon

Reputation: 35

custom fonts with Font-Family

@Font-Face is not working with my custom font files. I looked at several guides on HowTo and they all don't work for my font file that I'm using. What am I doing wrong here? I'm using firefox and chrome to test in my browsers. The font that I'm using is HERE.

@font-face {
  font-family: "RuneScape UF";
  src: url("fonts/runescape_uf.ttf") format("truetype");
  font-style: 100;
}

body {
  background-image: url("image/BS/bg.jpg");
  background-size: cover;
  font-family: "RuneScape UF";
  color: yellow;
  font-size: 40px;
}
<h1>
  testing
</h1>

Upvotes: 0

Views: 167

Answers (1)

Ahmad Bilal
Ahmad Bilal

Reputation: 382

Try making these changes- 

@font-face{
font-family: RuneScapeUF; src: url(/fonts/RunescapeUF.ttf);
}

  1. add a "/" before in the url if it is Linux server, otherwise on windows (xampp) leave it as it is.

  2. Remove the "_" from url (and also rename your file).

  3. Also remove the space, to make "RuneScape UF" into "RuneScapeUF"

  4. Also make sure, that your css file has 604 or 644 permissions (if Linux).

  5. Also in CSS file instead of under body, declare the font-family directly under h1.

BTW, why not use "p" instead of "h1", when you can manipulate "p" easily?

Upvotes: 1

Related Questions