1

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.

Rui Farinha
  • 196
  • 2
  • 14

2 Answers2

2

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
}
Keammoort
  • 3,075
  • 15
  • 20
1

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/

Lucky Chingi
  • 2,248
  • 1
  • 10
  • 15