CODEWITHSUNDEEP
htmlcssfontsweb
user1323153
user1323153

Reputation: 37

CSS stylesheet and custom fonts

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!

Upvotes: 0

Views: 19027

Answers (4)

Jack
Jack

Reputation: 1472

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"

}

Upvotes: 0

sandeep
sandeep

Reputation: 92803

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

Upvotes: 7

szabcsee
szabcsee

Reputation: 433

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

Upvotes: 3

gabitzish
gabitzish

Reputation: 9691

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/

Upvotes: 0

Related Questions