Using a custom (ttf) font in CSS

css fonts truetype
JJJollyjim picture JJJollyjim · Sep 22, 2011 · Viewed 123k times · Source

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

JNDPNT picture JNDPNT · Sep 22, 2011

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

Related questions

Default font set on Android

Can anyone tell me what are the bundled fonts on most Android devices, specifically for web pages? Just like Windows has their bundled fonts or Mac font lists, what are the fonts that come with most Android phones and tablets? …

Read More
How to merge fonts?

I have a number of fonts, OpenSans-bold.ttf OpenSans-boldItalic.ttf OpenSans-extrabold.ttf OpenSans-italic.ttf OpenSans-light.ttf How would I go on about to just create one file, as oppose to this many different files? And perhaps use them on CSS …

Read More
How to add some non-standard font to a website?

Is there a way to add some custom font on a website without using images, Flash or some other graphics? For example, I was working on a wedding website, and I found a lot of nice fonts for that subject. …

Read More