CODEWITHSUNDEEP
csswebfontsfont-face
Rui Farinha
Rui Farinha

Reputation: 196

Can't load custom font on website

I'm using @font-face to try and load a custom font on my website, at least on google chrome.

Still, I'm having a hard time doing so... can anyone help?

<style type="text/css">
@font-face {
  font-family: Folks;
  url(http://www.vtxfactory.com/Folks-Normal.ttf) format('truetype'),
}
body {
  background-color: #000000;
  text-align: center;
  color: #FFF;
  font-family: Folks;
}
</style>

The font name is "Folks" but I'm only using "Folks-Normal" as I don't use the bold version. The font is already allocated on the directed url source.

You can see on http://www.vtxfactory.com/ that when you enter, font-family changes to Times New Roman and don't load my custom font.

Best Regards, Rui Farinha.

Upvotes: 1

Views: 5528

Answers (2)

Lucky Chingi
Lucky Chingi

Reputation: 2258

Change the url in the CSS to path 

@font-face {
font-family: Folks;
src: url(/path/to/your/font/file/Folks-Normal.ttf) format('truetype'),
}

you can use this service too http://www.font2web.com/

Upvotes: 1

Keammoort
Keammoort

Reputation: 3075

I think you've missed required src property and semicolon at the end:

@font-face {
  font-family: Folks;
  src: url('http://www.vtxfactory.com/Folks-Normal.ttf') format('truetype'); //<-- semicolon
}

Upvotes: 2

Related Questions