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.

Answer 1

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

See also: MDN @font-face