css @font-face doesn't work

Question

I need to set a font family in my web page with thte @font-face, but I can't make it work propertly: This is the content of my css file

@font-face {
    font-family: knockout;
    src: url('../fonts/knockoutHTF27.ttf');
}

body {
    font-width: normal;
    font-size: 20px;
    font-family: knockout !important;
    color: #223041;
    text-align: center;
}

I've tried the same code in two diferent computers and it works pefercty in one of them but doesn't work in the other. What could be wrong?

Is the font available in the parent directory on both machines? — Tom Zych, Jul 11 '14 at 10:43
You need to generate the other font types - try using http://www.fontsquirrel.com/fontface/generator with your ttf — Pete, Jul 11 '14 at 10:49

Matija Mrkaic · Answer 1 · 2015-01-23T10:11:41.747

You should try with full embedding, with all the quotation marks. It clears possible malfunctions on different browsers/OS.

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Then, use it like this:

body {
    font-family: 'MyWebFont', Fallback, sans-serif;
}

As mentioned in a previous answer, if needed, you can use http://www.fontsquirrel.com/ or one of other font-face generator services on the web, to get all needed font formats.

score 0 · Answer 2 · answered Jul 11 '14 at 10:43

0

Try after removing ''

src: url(../fonts/knockoutHTF27.ttf);

answered Jul 11 '14 at 10:43

Arunkumar

5,150
4
28
40

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. – RiggsFolly Jul 11 '14 at 11:10
sorry. i am going to delete now. – Arunkumar Jul 11 '14 at 11:13

score 0 · Answer 3 · edited Jul 11 '14 at 10:52

0

You must use other font file format for different browesers not only .ttf, .woff, .eot. And check your path

edited Jul 11 '14 at 10:52

Pete

57,112
28
117
166

answered Jul 11 '14 at 10:43

Anon

2,854
14
18

css @font-face doesn't work

3 Answers3

Linked