Welcome!

[Jova]

Trying to use @Font-face but it's not working right. When displayed on the website, the font is all cracked. Anyone have any idea why?

And if I store the font files in my website project, how do I point to them with the src: url?
All examples on the web doesn't give me any clarification in this.

[Andy]

Why the new thread? Surely the old one would have sufficed.

Anyway, you'll have to give us a URL so we can see where it's going wrong.
As for the URL pointing, just use it as you would any other url:

Code: Select all

src: url(path/to/font);


[Jova]

Well I have the fonts in a folder called Fonts. The CSS stylesheet in another folder called CSS.

So the url to the font is src: url (../Fonts/fontname.ttf);

Weird thing is this is how it looks like in the browser, all broken.

headline.jpg (14.94 KiB) Viewed 161 times

Also, is the example used on http://nova-group.se/test/fonts/ supposed to not be valid CSS?

I get a warning that local isn't allowed with src, as in src: local(fontname.ttf).

[Andy]

Weird thing is this is how it looks like in the browser, all broken.

Again, I would need a link to test it. Also, in what browser is it breaking?

Also, is the example used on http://nova-group.se/test/fonts/ supposed to not be valid CSS?

I get a warning that local isn't allowed with src, as in src: local(fontname.ttf).

It's valid.

[TT_Mark]

The method you have linked to worked fine for me on my portfolio site (link below)

[Jova]

A link to what? Where you can find the specified font? This is where I get unsure of what the url is supposed to be. Is it supposed to be a url to a website with the font? Or to the folder in my project where I keep the font?

This is the font I'm trying to use, http://www.dafont.com/nilland.font

I'm using the latest version of Firefox.

[Andy]

The method you have linked to worked fine for me on my portfolio site (link below)

That's not his, that's mine

[Andy]

A link to what?

To the page where you are using the font.

[Jova]

The page isn't online, I'm working on it offline.

[Andy]

The page isn't online, I'm working on it offline.

Alright.

I checked the font you linked to and it looks like it's just poorly made and isn't really intended to be used on small font sizes. Click the TTF file and check the font preview for yourself.

[Jova]

I see. Yeah that must be it. Thank you for pointing that out.

[Andy]

By the way, use this site if you want to be sure that the fonts you are using can be embedded online:

http://www.fontsquirrel.com/

[Jova]

Thanks alot!

[Jova]

The font works fine in Firefox but IE does not show the custom font.

Code: Select all

@font-face
{
    font-family: CartoGothicFont;
    src: url(../Fonts/CartoGothicStd-Bold.eot);
    src: local(CartoGothic),
         url(../Fonts/CartoGothicStd-Bold.otf);
}

[Andy]

Seems to be an issue with the font. Be sure to check the fonts in both Firefox and IE before using them by going to "@font-face kit" and clicking on "demo of this font here."

By the way, you should be using format hinting on the font served up to Firefox, Opera, Safari, Chrome et al.