CSS stylesheet and custom fonts

Question

Alright, I'm a CSS newbie so here we go. In a template I'm using there's a stylesheet

head {font-family:Verdana; font-size:16px; color:#000000;}
body {font-family:Verdana; font-size:12px; color:#ffffff}
a {color:#ff0000; font-family:Verdana; font-size:30px;}
bluetext {color:#0000ff;}
tooltip{font-family:Verdana; font-size:11px; color:#ffffff;}

So I figure it's determining what the font should be for each of these sections. What do I do if I want to use a custom font instead of Verdana for all of these sections? I have the .ttf file, but I don't know what else to do.

Thanks in advance!

possible duplicate of [How to use our custom font on our website](http://stackoverflow.com/questions/1718488/how-to-use-our-custom-font-on-our-website) — Quentin, Apr 24 '12 at 08:42
You don't have to declare the font-family, color, etc. for each class. They will be inherited from their parent elements, so setting the font-family and color is only necessary for the body element, and the elements that you want to override. Also, the `head` section of a page only contains things like the title of the page, style sheets, etc., but nothing that is actually visible on the page, so styling it doesn't do anything. Lastly, you should look into classes and their notation in css, the classes `bluetext` and `tooltip` should be `.bluetext` and `.tooltip`. — Jesse van Assen, Apr 24 '12 at 08:43

score 7 · Answer 1 · answered Apr 24 '12 at 08:44

First generate font for all browser like woff for Mozilla, eot for IE etc. So, you can generate from http://www.fontsquirrel.com/fontface/generator & http://www.font2web.com/ . Then write @font-face in your CSS.

@font-face {
  font-family: 'font';
  src: url('font.eot?') format('eot'), url('font.woff') format('woff'), url('font.ttf') format('truetype');
}
body{
  font-family: 'font';
  color:#fff;
font-size:12px;
}
.head {font-size:16px; color:#000000;}
a {color:#ff0000; font-size:30px;}
.bluetext {color:#0000ff;}
.tooltip{font-size:11px;}

score 2 · Answer 2 · answered Apr 24 '12 at 08:42

You need to use font-face for that. The basic implementation is:

@font-face {
    font-family: CustomFontName;
    src: url(http://path-to/customfont.ttf);
    font-weight:400;
}

Then just use it like any other font in any other style rule.

p {
    font-family: CustomFontName, Helvetica, Arial, sans-serif;
}

score 0 · Answer 3 · answered Apr 24 '12 at 08:40

You must use this into your css file :

@font-face {
    font-family: your_font;
    src: url('your_font.ttf');
}

In order to work on IE, you should export another version of your font with .eot extension, and add another src property.

Edit: Here is an usefull link about using @font-face : http://www.webistrate.com/css3-custom-fonts-using-font-face/

score 0 · Answer 4 · answered Apr 24 '12 at 08:45

Just first install this font on your server/system/root.

& then apply like this in your css

@font-face {
        font-family: 'myriadproregular'(i.e.custom font name);
        src: local('myriadproregular'), url('myriadproregular.ttf') format("truetype");
    }
    and  if you want more than one font you can do the same
    @font-face {
        font-family: 'myriadprocond';
        src: local('myriadprocond'), url('myriadprocond.ttf') format("truetype");
    }
    @font-face {
        font-family: 'myriadprosemibold';
        src: local('myriadprosemibold'), url('myriadprosemibold.ttf') format("truetype");
    }

just use the font name where ever you want to use such as

p
{
font-family:"custom font name"

}

CSS stylesheet and custom fonts

4 Answers4