Font face does not seems to work

Question

i have downloaded the Bebas Neue.ttf and uploaded to my fonts folder via ftp. Then i added the following code to my css file

@font-face {
font-family: "bebas";
src: url(fonts/Bebas Neue.ttf) format("truetype");
}

and to apply to my title head i added the following code to my css

  .plain_text .big_title {
font-family: bebas;
font-size: 33px;
font-weight: bold!important;
}

you can see the tile which says WELCOME TO OUR COMPANY through thi slink - MY SITE.

I dont know what I have done wrong . Please help!! Thanks

score 3 · Accepted Answer · answered Jul 07 '14 at 06:19

3

Not only ttf format is used for web but also you need eot, woff and svg.

I usually use web font generator where you can upload your font and download.

And there is demo to use it too.

So now you can use like this:

@font-face {
    font-family: 'bebas';
    src: url('fonts/bebas.eot?') format('eot'), 
         url('fonts/bebas.woff') format('woff'), 
         url('fonts/bebas.ttf')  format('truetype'),
         url('fonts/bebas.svg#bebas') format('svg');
}

Have fun!

answered Jul 07 '14 at 06:19

Bhojendra Rauniyar

83,432
35
168
231

is there online tool to convert font into SVG format? – Kheema Pandey Jul 07 '14 at 06:24
I've linked in the answer check that. It's nice. – Bhojendra Rauniyar Jul 07 '14 at 06:24
1

oh just see the link, that's really nice online tool. you deserve +1 for providing the link:) – Kheema Pandey Jul 07 '14 at 06:26
1

@Melvin check carefully, you only defined font type `ttf` `eot` `woff` format are also required – Kheema Pandey Jul 07 '14 at 06:30
@C-link can you also post that MIME type also need to define on the server, Many time I provide the answer to define the MIME type as well while using custom fonts. Many people on SO have face the problem; always complain that Custom font not displaying on browser. – Kheema Pandey Jul 07 '14 at 06:31
I've never used [MIME type](https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types) to make font working – Bhojendra Rauniyar Jul 07 '14 at 06:34
that's strange @C-link – Kheema Pandey Jul 07 '14 at 06:36
@Melvin you need to ensure the path of the font it may be ../fonts/ – Bhojendra Rauniyar Jul 07 '14 at 07:04
tried that too .. im applying it in custom css option of the theme im using – Melvin Jul 07 '14 at 07:14
tell me the css file directory structure and fonts folder structure – Bhojendra Rauniyar Jul 07 '14 at 07:18

score 1 · Answer 2 · answered Jul 07 '14 at 06:31

1

You need all the formats of the font i.e. EOT, WOFF and TTF to accomplish the task and secondly try not to give space between the font name "BebasNeue.ttf" instead of "Bebas Neue.ttf" and the url must be in between the inverted commas ' or "

src: url(fonts/Bebas Neue.ttf)

then apply this code

@font-face {
font-family: 'Bebas Neue';
src: url('fonts/bebasneue.eot');
src: url('fonts/bebasneue.eot?#iefix') format('embedded-opentype'),
url('fonts/bebasneue.svg#Bebas Neue') format('svg'),
url('fonts/bebasneue.woff') format('woff'),
url('fonts/bebasneue.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

answered Jul 07 '14 at 06:31

Mohit S

13,723
6
34
69

1

I don't think any further answer need to post here. As the posted answer is completed itself and gives all answer posted by OP. – Kheema Pandey Jul 07 '14 at 06:35
Yes u r correct @KheemaPandey I have seen it later after posting the answer. but it does have atleast 2 things new for That dont use space and use inverted commas – Mohit S Jul 07 '14 at 06:38
that's nothing new as the web font generator itself have demo on the usage when you upload and download that I already said to look the demo there. – Bhojendra Rauniyar Jul 07 '14 at 07:21
@C-link Its really awesome and voted up for it .. it was new for me. but I said earlier that i have seen it later after posting the answer. – Mohit S Jul 07 '14 at 07:24
@MohitShrivastava it's ok. – Bhojendra Rauniyar Jul 07 '14 at 07:28

score 1 · Answer 3 · answered Jun 06 '15 at 12:05

1

I had same problem but solved it in removing the format(...) string at the end of the line. Be as simpliest as possible.

@font-face {
  font-family: 'bebasneue';
  src: url(../fonts/bebasneue/bebasneue.woff);
}

answered Jun 06 '15 at 12:05

Denis Truffaut

121
7

score 0 · Answer 4 · answered Jul 07 '14 at 06:46

0

Adding on to the above answer by C-Link and since I cannot comment, please use double quotes to make sure the link to the font is processed correctly. White Spaces can be a problem, if not now then later.

src: url("fonts/Bebas Neue.ttf") format("truetype");

You can refer to more details here http://www.w3.org/TR/css3-fonts/#font-reference-the-src-descriptor

answered Jul 07 '14 at 06:46

ValarMorghulis

79
1
13

what's the different between single quote and double quote here? – Bhojendra Rauniyar Jul 07 '14 at 07:06
The OP has used neither, which is why I responded in theb. And it is often deemed a better practice that when in doubt, use double quotes when you want to deal with spaces. Even in Windows and Linux, to the best of my knowledge, using double quotes solves the problem of having spaces in between the names while navigating to a folder. – ValarMorghulis Jul 07 '14 at 09:49

Font face does not seems to work

4 Answers4