9 Replies - 599 Views - Last Post: 07 February 2013 - 01:19 AM

#1 InfiniteRequiem  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 08-February 12

Using custom fonts CSS

Posted 06 February 2013 - 04:13 PM

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.

Is This A Good Question/Topic? 0
  • +

Replies To: Using custom fonts CSS

#2 InfiniteRequiem  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 08-February 12

Re: Using custom fonts CSS

Posted 06 February 2013 - 04:27 PM

Now it's working IE. Not currently working in Firefox or Chrome
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3360
  • View blog
  • Posts: 11,382
  • Joined: 12-December 12

Re: Using custom fonts CSS

Posted 06 February 2013 - 04:45 PM

View PostInfiniteRequiem, 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.
Was This Post Helpful? 0
  • +
  • -

#4 InfiniteRequiem  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 08-February 12

Re: Using custom fonts CSS

Posted 06 February 2013 - 04:47 PM

Yep, still not working.
Was This Post Helpful? 0
  • +
  • -

#5 InfiniteRequiem  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 08-February 12

Re: Using custom fonts CSS

Posted 06 February 2013 - 07:31 PM

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

Was This Post Helpful? 0
  • +
  • -

#6 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 795
  • View blog
  • Posts: 1,681
  • Joined: 30-January 09

Re: Using custom fonts CSS

Posted 06 February 2013 - 07:35 PM

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;
}


Was This Post Helpful? 2
  • +
  • -

#7 InfiniteRequiem  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 08-February 12

Re: Using custom fonts CSS

Posted 06 February 2013 - 08:01 PM

View Poste_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.
Was This Post Helpful? 0
  • +
  • -

#8 rajdeep01  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 8
  • Joined: 04-February 13

Re: Using custom fonts CSS

Posted 07 February 2013 - 12:35 AM

@font-face {
font-family: cool_font;
src: url('cool_font.ttf');
}
Was This Post Helpful? -1
  • +
  • -

#9 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3360
  • View blog
  • Posts: 11,382
  • Joined: 12-December 12

Re: Using custom fonts CSS

Posted 07 February 2013 - 01:14 AM

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.
Was This Post Helpful? 2
  • +
  • -

#10 InfiniteRequiem  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 08-February 12

Re: Using custom fonts CSS

Posted 07 February 2013 - 01:19 AM

View Postandrewsw, 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

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1