[InfiniteRequiem]

Hey guys,

Trying to implement a custom font on a website i'm making.
When opening the page locally the font loads fine. The font is not showing when opening the page from the server however and reverts to a default. I'm not quite sure why it isn't working. Code below

@font-face{
font-family:hamburgerheaven;
src: url("../fonts/hambh___.ttf");    /* TTF file for CSS3 */

}

@font-face{
font-family:hamburgerheaven;
src: url("../fonts/hambh___.eot");    /* EOT file for IE */

}

#main-content {
	position:relative;
	top:-80px;
	padding-left: 230px;
	font-family:hamburgerheaven;
}

Any ideas?

Thanks,
Dan.

[InfiniteRequiem]

Now it's working IE. Not currently working in Firefox or Chrome

[andrewsw]

InfiniteRequiem, on 06 February 2013 - 04:27 PM, said:

Now it's working IE. Not currently working in Firefox or Chrome

Have you cleared your browsers' cache.

[InfiniteRequiem]

Yep, still not working.

[InfiniteRequiem]

The two font files seem to be conflicting.

Removing the EOT for IE allows the font to be seen in Firefox and Chrome.

This post has been edited by InfiniteRequiem: 06 February 2013 - 07:32 PM

[e_i_pi]

You're giving your fonts the same name. Try this instead:

@font-face{
font-family:hamburgerheaven;
src: url("../fonts/hambh___.ttf");    /* TTF file for CSS3 */

}

@font-face{
font-family:hamburgerheaven2;
src: url("../fonts/hambh___.eot");    /* EOT file for IE */

}

#main-content {
	position:relative;
	top:-80px;
	padding-left: 230px;
	font-family:hamburgerheaven,hamburgerheaven2;
}

[InfiniteRequiem]

e_i_pi, on 06 February 2013 - 07:35 PM, said:

You're giving your fonts the same name. Try this instead:

Haha, can't believe thats what was wrong. Cheers. Works now.

[rajdeep01]

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

[andrewsw]

There is an optimal way that you can declare a font-face:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

The reasons behind this are discussed here.

[InfiniteRequiem]

andrewsw, on 07 February 2013 - 01:14 AM, said:

There is an optimal way that you can declare a font-face:

Ah awesome, that's a really nice way of doing it and will help in keeping my stylesheet readable! Thanks!

This post has been edited by InfiniteRequiem: 07 February 2013 - 01:20 AM