@font-face fonts not working

Question

I'm trying to get a font working from local storage.

@font-face {
    font-family: const;
    src: url(const.ttf);
}

.fp_title1 {
    font-family: 'const', trebuchet ms;
    font-size: 350%;
    font-weight: 100;
    -webkit-text-stroke: 1px;
}

This won't work. I've tried renaming the file, using the 'font-family' with and without quotes...

I've also tried to link the font with HTML

<link href='CSS/const.ttf' rel='stylesheet' type='text/css'>

It's in the same folder, the name is right. I don't get it.

EDIT: My CSS file is already linked, the font is .ttf

Answer 1

You might have 2 mistakes in code: path and extention. And use the following formats as well as ttf:

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

urls that helps to create web fonts:

http://www.fontsquirrel.com/tools/webfont-generator

http://www.font-face-generator.com/

Answer 2

CSS has a .css filename extension, you gave it .ttf