@font-face - CSS-Tricks

This topic is empty.

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
April 25, 2012 at 4:35 pm #37752
kmatinyan
Member
I have embedded Yakov thin fonts with CSS via @font-face but the fonts are are so different from the original ones. What could be the reason for this? Here is my code
```
@font-face

{

font-family:'Yakovthin';

src: url('../fonts/yakovthin-webfont.eot');

src: url('../fonts/yakovthin-webfont.eot?#iefix') format('embedded-opentype'),

url('../fonts/yakovthin-webfont.woff') format('woff'),

url('../fonts/yakovthin-webfont.ttf') format('truetype'),

url('../fonts/yakovthin-webfont.svg#') format('svg');

}



div#mainContainer

{

font-family:'Yakovthin';

font-size:12px;

}
```
Seems like everything’s correct, but it doesn’t work anyways. Can anyone please help?
April 25, 2012 at 4:36 pm #101767
TheDoc
Member
```
div#mainContainer

{

font-family:'Yakovthin';

font-size:12px;

font-weight: normal;

}
```
April 25, 2012 at 4:41 pm #101768

kmatinyan
Member

I’ve tried that way, but still no difference :(.

April 25, 2012 at 7:36 pm #101775
chrisburton
Participant
@kmatinyan Try not to change anything and see if this works. Copy below:
```
@font-face {

font-family:'Yakovthin';

src: url('fonts/yakovthin-webfont.eot');

src: url('fonts/yakovthin-webfont.eot?#iefix') format('embedded-opentype'),

url('fonts/yakovthin-webfont.woff') format('woff'),

url('fonts/yakovthin-webfont.ttf') format('truetype'),

url('fonts/yakovthin-webfont.svg#') format('svg');

font-weight: normal;

}



#mainContainer {

font-family:'Yakovthin';

font-size:12px;

}
```
April 25, 2012 at 8:23 pm #101776

TheDoc
Member

Ah yes, @ChristopherBurton is on the right trail – you’re probably not linking to the font files correctly.

April 27, 2012 at 4:34 pm #101904

kmatinyan
Member

Thanks, but still not working :(
The weird thing is that in firebug the computed font is “Yakovthin”.

April 27, 2012 at 5:32 pm #101910

chrisburton
Participant

@kmatinyan what is the full url to the fonts?

April 27, 2012 at 6:08 pm #101913

kmatinyan
Member

@ChristopherBurton here it is C:UsersKarineDesktopHeshboniafonts .

April 27, 2012 at 6:12 pm #101915

chrisburton
Participant

@kmatinyan No, not locally. What is the url to the fonts on your site?

e.g. (kmatinyan.com/fonts/yakovthin-webfont.eot)

April 27, 2012 at 6:18 pm #101916

kmatinyan
Member

@ChristopherBurton this one :)
http://profsyntax.com/demo/Heshbonia/fonts/

April 27, 2012 at 6:28 pm #101917
chrisburton
Participant
@kmatinyan
```
@font-face {

font-family:'Yakovthin';

src: url('http://profsyntax.com/demo/Heshbonia/fonts/yakovthin-webfont.eot');

src: url('http://profsyntax.com/demo/Heshbonia/fonts/yakovthin-webfont.eot?#iefix') format('embedded-opentype'),

url('http://profsyntax.com/demo/Heshbonia/fonts/yakovthin-webfont.woff') format('woff'),

url('http://profsyntax.com/demo/Heshbonia/fonts/yakovthin-webfont.ttf') format('truetype'),

url('http://profsyntax.com/demo/Heshbonia/fonts/yakovthin-webfont.svg#') format('svg');

font-weight: normal;

}



#mainContainer {

font-family:'Yakovthin';

font-size:12px;

}
```
April 27, 2012 at 6:33 pm #101918

kmatinyan
Member

@ChristopherBurton doesn’t help :(

April 27, 2012 at 6:47 pm #101919

chrisburton
Participant

@kmatinyan

The problem is that this font has no a-z glyphs.

See the difference? Demo

Here is what this font comes with

April 27, 2012 at 7:11 pm #101921

kmatinyan
Member

@ChristopherBurton Oh, I see now!

Thanks a lot!

April 27, 2012 at 7:26 pm #101923

chrisburton
Participant

My pleasure.
Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

The forum ‘CSS’ is closed to new topics and replies.