Why cant i get the entypo font working with @font-face?

HTML & CSS
1

So i downloaded the package from the official site… but when i unpack it i get alot of errors. And the icons wont show when i open the “entypo.otf” i just see regular letters…

i copied the fonts to my project and then:

<span aria-hidden="true" data-icon="&#9776;"></span>

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

[data-icon]:before {
  font-family: 'entypo'; /* BYO icon font, mapped smartly */
  content: attr(data-icon);
  speak: none; /* Not to be trusted, but hey. */
}

But its not working… WHY?

2

Maybe you can’t apply a font to generated content. It works if you apply the font to the span:

span {
  font-family: 'entypo'; /* BYO icon font, mapped smartly */
  content: attr(data-icon);
  speak: none; /* Not to be trusted, but hey. */
}
3

but if i remove the before class nothing shows up? btw the spans are inside <li><a></a></li> if that matters?

I managed to get some icons showing now by using this:

span:before {
font-family: ‘entypo’; /* BYO icon font, mapped smartly /
content: attr(data-icon);
speak: none; / Not to be trusted, but hey. */
}

But the icons look like **** and not near what they do on the http://www.entypo.com/characters/

dont understand what the problem is.

4

Yes, sorry, I meant to post this:

span {
  font-family: 'CabinRegular';
}

[data-icon]:before {
  content: attr(data-icon);
}
5

I just did a test with the actual entypo font, and I take back what I said above. The code you posted should work fine. I think the problem might be the paths to your fonts. You have just used the path given by the entypo site, which is ‘font/entypo/entypo.eot’ etc. But have you really stored your fonts in an /entypo/ folder inside a /font/ folder inside the /css/ folder? If not, the paths are wrong for your site. :slight_smile:

6

facepalm on myself , its always thoose small things lol…

So yeah now the correct icons show, but now i have another issue, the menu items which have the icons on them now have a big padding on top, u know what this can be?

7

It’s probably the line height on the font of the generated content, but that’s hard to deal with. With a bit of fiddling, I got a nice result with this:

span {position: relative; display: inline-block;}

[data-icon]:before {
  font-family: 'entypo';
  font-size: 400%;
  content: attr(data-icon);
  speak: none;
  position: absolute;
  right: 100%;
  top: -5px;
  line-height: 0;
}

But you might have to play around a bit to suit your code.

8

thx man, got it working nice now.

9

No probs. You’re welcome. Was the code above any use, or did you try something else?

10

Yeah i used pretty much that code except i changed the it to top: -3px and added left: -35px so that the icons wouldnt be on top of the text i have in the menu items=)

11

Yes, I wondered how this would affect the layout of the list items. I did an experiment with that, and decided to add right margins to the list items to stop the icons from overlapping each previous list item.