CODEWITHSUNDEEP
htmlcss
Paradigm
Paradigm

Reputation: 161

installing new Fonts in CSS

I have been attempting to install a font and use it in my CSS and have been unsuccessful at this. I would like to figure out where am I going wrong. I uploaded the .tff file in the same folder as the CSS file and added to the updated my css file in the appropriate manner.

here is a copy of what I have in my css:

    @font-face
    {
   font-family: ImpactLabel;
   src: url('ImpactLabel.tff');
    }
    p.change
    {
   font-family:ImpactLabel;
   color: #A70C1E;
   font-size:3em;   
    }

Here is my html file: 

<p class="change">Text</p>

Upvotes: 1

Views: 2069

Answers (3)

Ennui
Ennui

Reputation: 10190

Upload it to the FontSquirrel Webfont Generator and use the code and files it gives you. Problem solved!

FontSquirrel will generate several different formats of the font which are loaded selectively by different browsers and devices (and thus will give you the broadest compatibility).

Edit: Apparently this font is actually on FontSquirrel already, so all you need to do is click here and download the webfont kit from them.

Upvotes: 0

Mini John
Mini John

Reputation: 7941

Check this -> 

@font-face {
  font-family: ImpactLabel;
  src: url('ImpactLabel.ttf'), <-- Check if the path is correct (ttf not tff)
       url('ImpactLabel.eot'); /* IE9 */
}

Then just call on your class:

.change {
  font-family: 'ImpactLabel';
}

Upvotes: 4

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

try this http://www.fontsquirrel.com/tools/webfont-generator

@font-face {
    font-family: 'primelight';
    src: url('prime_light-webfont.eot');
    src: url('prime_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('prime_light-webfont.woff') format('woff'),
         url('prime_light-webfont.ttf') format('truetype'),
         url('prime_light-webfont.svg#primelight') format('svg');
    font-weight: normal;
    font-style: normal;

}
    p.change{ 
        font-family: "primelight", Verdana, Tahoma;
    }

creat a repository in your website : fonts/prime/

put the prime files inside make sure you have something like this :PrimeLight.otf

read more here I need Prime font for my web site

Upvotes: 0

Related Questions