Using a custom (ttf) font in CSS

Question

I have a mac, and have installed a font called "7 Segment" (it shows up in Font Book). When I use font-family: "7 Segment"; I get Helvetica (or similar) rather than the browser's default font, but it still isn't showing the correct font. The page only needs to be shown on this computer. How would I use the font on this page? Thanks.

Are you 100% positive the font has been registered as a system font? Many font applications don't always do so, as too many registered fonts can result in a performance penalty. — J. M. Becker

JNDPNT JNDPNT · Accepted Answer · 2011-09-22T09:27:35

You need to use the css-property font-face to declare your font. Have a look at this fancy site: http://www.font-face.com/

Example:

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
       local("HelveticaNeue-Bold"),
       url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

Using a custom (ttf) font in CSS

2 Answers