Custom font via CSS

Question

I am learning php, html and css now and I'm trying to use a custom font on my site. I found the @font-face property that allows to make that, but it doesn't work. What am I doing wrong? css:

@font-face {font-family: LazurskiCTT;src:url(../sources/fonts/ie/LazurskiCTT Regular.eot);}
/*IE*/ 
@font-face {font-family:LazurskiCTT;src:url(../sources/fonts/LazurskiCTT Regular.Ttf);}
/*Other browsers*/
#myFonts{font-family:LazurskiCTT;}

html:

<p id="myFonts">Lazurski</p>

Maybe it's because I use it on my local machine? I run it in FireFox.

If you are declaring it exactly like that, I believe that the second rule will win (even if the browser doesn't understand the font file type). See this blog post on @font-face. — Kevin Peno
– Kevin Peno, Commented May 12, 2011 at 22:19

martnu · Accepted Answer · 2011-05-13 22:31:34Z

8

The easiest (and best) way to get it to work is to use fontsquirrel's generator:

http://www.fontsquirrel.com/fontface/generator

answered May 13, 2011 at 22:31

martnu

7634 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

robx · Accepted Answer · 2011-05-13 01:01:44Z

4

Assuming your font path are correct try this. Quote's... some say it not necessary, but i find it to work best. In some cases my CSS breaks without the quotes (Especially when white space is involved in path).

Note: Use this site to convert your ttf to eot for it to work on IE (Place both .ttf & .eot in same directory). http://ttf2eot.sebastiankippe.com/

@font-face {
    font-family: "LazurskiCTT"; 
    src:url("../sources/fonts/ie/LazurskiCTT Regular.eot"); /*IE*/
    src:url("../sources/fonts/LazurskiCTT Regular.Ttf") format("truetype"); /*Non-IE*/

}

This works for my site. Hope it works for you too.

edited May 13, 2011 at 1:01

answered May 12, 2011 at 23:30

robx

3,1132 gold badges28 silver badges29 bronze badges

Comments

2 revs · Accepted Answer · 2017-05-23 12:15:38Z

2

You are missing a slash / after .., that may already be it.

Note that most Linux-based systems are case sensitive - the .Ttf may not work if it's not written exactly that way.

For a detailed walk-through how to set up custom fonts across browsers, also see this question: Error while using the custom fonts in css

edited May 23, 2017 at 12:15

community wiki

2 revs
Pekka 웃

3 Comments

Pekka Over a year ago

@Kevin the answer consisted of the "you are missing a slash" bit only initially - it grew afterwards, unexpectedly :)

Frankie Drake Over a year ago

What wiki?? I have a construction but can't run it.

Frankie Drake Over a year ago

thanx, the font extention is *.Ttf.

breezy · Accepted Answer · 2011-05-12 22:17:49Z

2

It should work on your local machine. Try the following.

Make sure that the path to your font is correct.

@font-face {
font-family: CustomFont;
src: url('CustomFont.otf');
}
p {font-family:CustomFont, Helvetica, Arial}

<p>Text here</p>

answered May 12, 2011 at 22:17

breezy

1,9181 gold badge18 silver badges35 bronze badges

1 Comment

Frankie Drake Over a year ago

Thanx, I try try, but no result. Font squirrel is a good thing, maybe it will useful.

Collectives™ on Stack Overflow

Custom font via CSS

4 Answers 4

Comments

Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related