Custom font via CSS
Solution 1
The easiest (and best) way to get it to work is to use fontsquirrel's generator:
http://www.fontsquirrel.com/fontface/generator
Solution 2
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.
Solution 3
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
Solution 4
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>
Frankie Drake
Updated on June 23, 2022Comments
-
Frankie Drake almost 2 years
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.
-
Pekka almost 13 years@Kevin the answer consisted of the "you are missing a slash" bit only initially - it grew afterwards, unexpectedly :)
-
Frankie Drake almost 13 yearsWhat wiki?? I have a construction but can't run it.
-
Frankie Drake almost 13 yearsthanx, the font extention is *.Ttf.
-
Frankie Drake almost 13 yearsThanx, I try try, but no result. Font squirrel is a good thing, maybe it will useful.