Grow your CSS skills. Land your dream job.

@font-face

  • # October 2, 2009 at 1:29 pm

    Anyone using @font-face? I’ve got a blog that originally I used Cufon for font replacement. Had troubles w/Cufon after WordPress 2.8.4 upgrade. So have decided to use @font-face.

    So far, it works great in FF, Safari & Opera (though Opera has other issues!).

    But I cannot get it to work in IE 7 & 8. And yes, I’ve followed all the online directions, using .eot files and first declarations. But no go.

    Here’s the code:

    Code:
    @font-face
    { font-family: ‘YanoneKaffeesatzThin’;
    src: url(‘fonts/YanoneKaffeesatz-Thin.eot’);
    src: local(‘Yanone Kaffeesatz Thin’), local(‘YanoneKaffeesatz-Thin’), url(‘fonts/YanoneKaffeesatz-Thin.otf’) format(‘opentype’); }

    @font-face
    { font-family: ‘YanoneKaffeesatzLight’;
    src: url(‘fonts/YanoneKaffeesatz-Light.eot’);
    src: local(‘Yanone Kaffeesatz Light’), local(‘YanoneKaffeesatz-Light’), url(‘fonts/YanoneKaffeesatz-Light.otf’) format(‘opentype’); }

    @font-face
    { font-family: ‘YanoneKaffeesatzReg’;
    src: url(‘fonts/YanoneKaffeesatz-Regular.eot’);
    src: local(‘Yanone Kaffeesatz Regular’), local(‘YanoneKaffeesatz-Regular’), url(‘fonts/YanoneKaffeesatz-Regular.otf’) format(‘opentype’); }

    @font-face
    { font-family: ‘YanoneKaffeesatzBold’;
    src: url(‘fonts/YanoneKaffeesatz-Bold.eot’);
    src: local(‘Yanone Kaffeesatz Bold’), local(‘YanoneKaffeesatz-Bold’), url(‘fonts/YanoneKaffeesatz-Bold.otf’) format(‘opentype’); }

    @font-face
    { font-family: ‘Cuomotype’;
    src: local(‘Cuomotype’), local(‘Cuomotyp’), url(“fonts/Cuomotype.TTF”); format(“trutype”); }

    Here’s the site: http://blog.franklyrealty.com

    Thanks for any help!
    –Catherine

    # October 4, 2009 at 12:47 am

    hey, wish i could help. it’s a nice site, goin on my bookmark list for sure.

    # October 4, 2009 at 12:57 am

    Hi Makeshift,

    Thanks! Got @font-face working in IE…turned out IE just didn’t like my original fonts. I tried some substitutes and added them into fontstacks. Lo an behold, the substitute fonts work! Only thing I can figure is that the .eot files of first fonts were off or something. Don’t know…got all the originals and substitute .eot files from FontSquirrel.

    IE will mess with you every time!

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".