1

I'm still pretty new to html and css, so I might be overlooking things. Been entertaining myself trying to create a little website and arrived at embedding a font to it. It is working in firefox, yet in internet explore it isn't. I do not know about other browsers. Here is a link to the site. Click the L to go to a second page: http://librarchive.com/newcat.html. Due to this there are also some positioning faults, as you can see.

So the font is not correctly working. What do I do?

Here is my css code, i have a .eot and .ttf file of the font:

@font-face{ 
font-family: libralust; 
src: url('Futura_Bk.eot'); /* For IE */ 
src: local('libralust'), url('Futura_Bk.ttf') format('truetype'); /* For non-IE */ 
}

body {
font-family: libralust, Verdana, Arial, sans-serif;
text-align:center;
}

I've been searching, but am not experienced enough to understand it all. Other commentary about site is appreciated too. Thanks for you help!

PSZ_Code
  • 1,015
  • 10
  • 29

2 Answers2

0

this a an example of cross-site font embedding has suggested by fontsquirel

@font-face {
    font-family: 'OpenSansLight';
    src: url('/skins/default/media/fonts/OpenSans-Light-webfont.eot');
    src: url('/skins/default/media/fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
    url('/skins/default/media/fonts/OpenSans-Light-webfont.woff') format('woff'),
    url('/skins/default/media/fonts/OpenSans-Light-webfont.ttf') format('truetype'),
    url('/skins/default/media/fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

Now you can figure out what's wrong ?

I'll point another hint : local

For a detailed explanation read this : the-new-bulletproof-font-face-syntax and/or bulletproof-font-face-implementation-syntax

Milche Patern
  • 19,632
  • 6
  • 35
  • 52
  • the local(as the rest of the code) was suggested by the ttf-> eot convertor, and as i didn't knew what it does, I just copied it over. I guess it is a good idea to get the .woff and .svg versions too. Any converters you would suggest? and the #iefix... what does it do? – PSZ_Code Feb 19 '13 at 15:51
0

Not all browsers support Font-Face and there are lots of font ext; like eot, svg, woff, ttf.

Try this since you only have eot and ttf:

@font-face{ 
    font-family: libralust;
    src: url('Futura_Bk.eot');
    src: url('Futura_Bk.eot?#iefix') format('embedded-opentype'),
    url('Futura_Bk.ttf') format('truetype');
    font-weight: normal; /* thin? normal? bold? */
    font-style: normal;
}
EminezArtus
  • 1,102
  • 9
  • 12