Using "font squirrels" @font-face.

brakyardgames / 2012-08-19 21:01:12   

Hello,

I am new with html code but I am learning. I am trying to insert a font called "Hammer Keys" that i got from Dafont.com (dafont.com/…). I uploaded it to font squirrels font face and placed my stylesheet.css to my style.css on the assets page of Indexhibit.

@font-face {
font-family: 'hammerkeysregular';
src: url('hammk___-webfont.eot');
src: url('hammk___-webfont.eot?#iefix') format('embedded-opentype'),
url('hammk___-webfont.woff') format('woff'),
url('hammk___-webfont.ttf') format('truetype'),
url('hammk___-webfont.svg#hammerkeysregular') format('svg');
font-weight: normal;
font-style: normal;

}

& I placed this in my index.php folder on the assets page of Indexhibit:

All is does is turn all my font into Times New Roman. I don't know what I am doing wrong. Help would be much appreciated.

Thanks!

-Robert

My website is: brakyardgames.com

Vaska A / 2012-08-19 21:05:03   

You should place that towards the end of your style.css file - not at the beginning.

Also, those definitions can't be right. If the typeface is being hosted at font squirrel then you need to include the path, as well, back to their site.

Vaska A / 2012-08-19 21:05:37   

I'm deleting all your empty posts - please don't do that.

brakyardgames / 2012-08-19 21:06:45   

sorry was trying to post a code.. : /

Vaska A / 2012-08-19 21:07:25   

Then use 'code' tags - and no full line breaks in the code.

jimmythesaint / 2012-08-20 22:04:26   

@ brakyardgames - instructions on how to do it here:
webpublishing2.wordpress.com/week-five-2/fontface-with-indexhibit/

farber / 2012-09-19 16:02:28   

the link above is not working.
Anywhere i can find complete working instructions?
i'm searching in the forum and can't find them, anyone can help?

Thanks

ooeylani / 2012-10-02 01:48:23   

@ brakyardgames - Sorry, I use this blog for class and clear it at the start of the each new semester. It's up again and updated for v2.
webpublishing2.wordpress.com/week-five-2/fontface-with-indexhibit/

Jeroen_ / 2012-11-02 21:19:54   

I'm using this code to get the typeface working but I can't get it to work.

The code is the one I got from the font2web converter.

  1. @font-face {
  2.     font-family: 'Conv_AvenirNextLTPro-Bold';
  3.     src: url('jeroenvandegruiter.nl/httpdocs/ndxzsite/fonts/…');
  4.     src: local('☺'), 
  5.     url('jeroenvandegruiter.nl/httpdocs/ndxzsite/fonts/…') format('woff'), 
  6.     url('jeroenvandegruiter.nl/httpdocs/ndxzsite/fonts/…') format('truetype'), 
  7.     url('jeroenvandegruiter.nl/httpdocs/ndxzsite/fonts/…') format('svg');
  8.     font-weight: normal;
  9.     font-style: normal;
  10. }

@font-face {
    font-family: 'Conv_AvenirNextLTPro-Regular';
    src: url('jeroenvandegruiter.nl/httpdocs/ndxzsite/fonts/…');
    src: local('☺'),
    url('jeroenvandegruiter.nl/httpdocs/ndxzsite/fonts/…') format('woff'),
    url('jeroenvandegruiter.nl/httpdocs/ndxzsite/fonts/…') format('truetype'),
    url('jeroenvandegruiter.nl/httpdocs/ndxzsite/fonts/…') format('svg');
    font-weight: normal;
    font-style: normal;
}

my website

brakyardgames / 2012-11-29 22:05:41   

Thanks for all the help! Got it!

This thread has been closed, thank you.