@font-face Problems

[KillZoneZ]

I’m trying to add a custom font do my website, but for some reason it isn’t working. This is what i’ve tried:

Added this to the css file(Didn’t work):

@font-face {
font-family: Pixelated;
src: url(pixelated.ttf);
}

Changed to this(Also didn’t work):

@font-face {
font-family: Pixelated;
src: local(‘pixelated.ttf’);
}

Lastly tried to add them both (one at a time) it in the php file under style, and still didn’t work.

Yes i used it on an HTML element and it didnt work.

[bearhead]

This is usually how I setup a custom font:
I think your main issues are;
-not wrapping your font name in quotes
-your src line is written incorrectly

@font-face {
font-family: 'your font';
src:url('/your directory/your font.eot');
src:url('/your directory/your font.eot?#iefix') format('embedded-opentype'),
url('/your directory/your font.ttf') format('truetype'),
url('/your directory/your font.svg#your font') format('svg');
font-weight: normal;
font-style: normal;
}

[Shikkediel]

Isn’t a woff file missing there? That would be one that’s got the most support, I think. That and a ttf and you should be pretty good these days.

Although I just noticed the default font on Android looks a lot better than any custom one…

I don’t think you need any quotes by the way, unless the font name is more than a single word (they are definitely not necessary inside the CSS url).

The original example only works if the file is in the same directory as the HTML document of course, like bearhead indicated.

[Author]

Posts