Adding Font To A CSS Page

Question

I have a font I downloaded and I'm trying to apply that font to my site.

so I simply used font-family but my font isn't there(obviously) any idea on how to add it?

Check out @font-face https://developer.mozilla.org/en/css/@font-face — Šime Vidas, Jan 18 '11 at 21:14
http://stackoverflow.com/questions/107936/how-to-add-some-non-standard-font-to-website — TommyGunn32, Jan 19 '11 at 02:39

score 3 · Accepted Answer · answered Jan 18 '11 at 21:16

3

You have to embed the font via CSS before you can use it (since most computers probably don't have the font installed locally). Check out:

CSS Cross Browser Fonts using CSS3 @font-face

The cross-browser compatible code ends up looking something like:

@font-face 
{  
    font-family: "Your Font Name";  
    src: url(~/Fonts/SomeFontName.eot); /* IE */  
    src: local("The Real Font Name"), 
         url(~/Fonts/FontFileName.ttf) format("truetype"); /* non-IE */  
}  

body
{ 
    font-family:"Your Font Name", verdana, helvetica, sans-serif;  
}

answered Jan 18 '11 at 21:16

Justin Niessner

242,243
40
408
536

Any licensing issues with @font-face? – IrishChieftain Jan 18 '11 at 21:30
@IrishChieftain - Of course. As with anything else, you have to pay attention to the licensing for the font you are using. Some allow your to freely re-distribute the font. Others don't (and these are the ones you can't use). – Justin Niessner Jan 18 '11 at 21:32
How do I make my CCS version 3? its 2.1 now (Also, format("truetype") is not a valid value for src property) – Or Betzalel Jan 18 '11 at 21:59
@Or Batzalel - You don't have to do anything special. – Justin Niessner Jan 18 '11 at 22:44

score 0 · Answer 2 · answered Jan 18 '11 at 21:15

0

You simply write the name of the font, such as:

font-family: Gotham;

.. or ...

font-family: "Myriad Pro";

It will work on your machine but not on users' machines unless they have the font installed.

answered Jan 18 '11 at 21:15

Tom

30,090
27
90
124

Brian Mains · Answer 3 · 2015-09-07T17:47:25.597

-1

I think the question is how can users of your site see the new font? Try this out: http://www.howtoplaza.com/how-to-use-custom-fonts-on-your-website-with-css

Such as this:

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

edited Sep 07 '15 at 17:47

answered Jan 18 '11 at 21:17

Brian Mains

50,520
35
148
257

Adding Font To A CSS Page

3 Answers3