Grow your CSS skills. Land your dream job.

@font-face issue…

  • # May 6, 2010 at 11:27 am

    Hi to all!!

    At the moment my problem is: I uploaded an external font for first on my pc and then on the server and I added this code into my html page:

    Code:
    @font-face{
    font-family: Anmari;
    src: url(‘Anmari.ttf’);

    }

    h1{
    font-family: Anmari;
    color: #fff;
    text-align: center;
    font-size: 30px;
    font-weight: normal;
    }

    So we can find this page and the font on the server, the problem is that other computers and browsers don’t read the font… WHY? I am going just a bit mad ;) Thx to all!!!

    # May 6, 2010 at 4:22 pm

    Hi there,

    Your code looks good but…

    @font-face{
    font-family: Anmari;
    src: url(‘Anmari.ttf);
    }

    this little guy in red look odd… so maybe that’s the problem? or maybe you don’t have permissions on that file at the hosting server?

    # May 6, 2010 at 5:35 pm

    I believe the above comment is right, that’s not a proper apostrophe. Backspace and retype it and you should be good. Also make sure your file path is right and that it doesnt need a / or a ../ on it.

    # May 6, 2010 at 7:14 pm

    .ttf files do not work on all browsers. You need something like the following (from Paul Irish)

    Code:
    @font-face {
    font-family: ‘Graublau Web’;
    src: url(‘GraublauWeb.eot’);
    src: local(‘?’),
    url(‘GraublauWeb.woff’) format(‘woff’), url(‘GraublauWeb.ttf’) format(‘truetype’);
    }
    # May 7, 2010 at 5:26 am

    Hi guys!!

    All of your comments are so udeful I thank you!!

    The apostrophe was so wrong ( but I don’t know why I checked if it’s depend on the script ); it’s not so clear about the "smily-face" yet ( how can I add a smily-face??? ) but I am reading several topics for example one by Paul Irish and one by Jonathan Snook and more so I am going into the @font-face ‘situation’ and wow! it’ so complex…

    Anyway, I’ll use the last rule posted and thx again guys!! Have a good day!!

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

You must be logged in to reply to this topic.

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