Grow your CSS skills. Land your dream job.

@fontface problem with chrome

  • # January 24, 2013 at 3:50 pm

    I’m having some issues with a webfont not showing up in Chrome (or any browser), but I can’t figure out why. I’m hoping someone knows better than I how to fix it. I can get one font to work, but for some reason when I attempt another, it fails to display.

    CSS is thus:

    @fontface {
    font-family: ‘edmondsans-bold’;
    src: url(‘../EdmondSans-bold/edmondsans-bold-webfont.eot’) format(‘eot’);
    src: url(‘../EdmondSans-bold/edmondsans-bold-webfont.woff’) format(‘woff’),
    url(‘../EdmondSans-bold/edmondsans-bold-webfont.ttf’) format(‘truetype’),
    url(‘../EdmondSans-bold/edmondsans-bold-webfont.svg’) format(‘svg’);
    font-weight: bold;
    font-style: bold;
    }
    @fontface {
    font-family: ‘goudy-italic’;
    src: url(‘../OFL-goudy/GoudyStM-Italic-webfont.eot’) format(‘eot’);
    src: url(‘../OFL-goudy/GoudyStM-Italic-webfont.woff’) format(‘woff’),
    url(‘../OFL-goudy/GoudyStM-Italic-webfont.ttf’) format(‘truetype’),
    url(‘../OFL-goudy/GoudyStM-Italic-webfont.svg’) format(‘svg’),
    url(‘../OFL-goudy/OFLGoudyStM-Italic.otf’) format(‘opentype’);
    font-weight: normal;
    font-style: italic;
    }

    I use style the elements later in the document thusly:

    h1 {
    color: #666;
    float: left;
    display: block;
    width: 100%;
    padding: 0;
    margin: -0.065em 0 -0.9655555em;
    font: 1.7em ‘edmondsans-bold’;
    text-align: center;
    line-height: 2.5em;
    }
    .intro {
    color: #666;
    float: left;
    display: block;
    width: 100%;
    padding: 0;
    margin: 2.66em 0 2.48em;
    font: 1.7em ‘goudy-italic’;
    font-style: italic;
    text-align: center;
    line-height: 1.5em;
    }

    Now here’s the weird part: Edmondsans displays fine, no problems. Goudy italic does not (it shows up as Georgia). But wait! inspection tool in Chrome says that it is indeed displaying Goudy, even though this is definitely not the case.

    File structure is the same for both fonts, but again, edmond loads fine, while goudy fails. I’ve been at this for hours, and nothing’s changed, so I’m hoping someone will be able to spot an error that I’ve overlooked, or know of a fix I can’t find. Thanks!

    # January 24, 2013 at 4:05 pm

    Do you have a link? Anyways are you sure, that it’s because of the font? Have you tried a system font, like Arial, Verdana ?

    # January 24, 2013 at 4:27 pm

    Ah, I’m testing locally unfortunately. Regarding system fonts: yup, Times works totally fine.

    # January 26, 2013 at 8:53 pm

    Figured I would update this, as I got a working demo online. Inspect element says it should be referencing the right font, but it still shows up as Georgia rather than Goudy for me. Really odd and annoying. Link to online demo below. The “intro” text is the most obvious place that the issue is showing up.

    [http://andrewdixondesign.com/Portfolio_Site_2013%2021-43-49/Index.html](http://andrewdixondesign.com/Portfolio_Site_2013%2021-43-49/Index.html “Demo Here”)

    # January 26, 2013 at 9:11 pm

    @adixon Give the @font-face syntax an absolute URL and I bet they will work.

    If they end up working, your file path is wrong.

    # January 26, 2013 at 11:01 pm

    ah, appreciate the reply. I gave it a shot, and no luck unfortunately. And I was relatively sure of the file paths before. They were identical in structure to the working font.

    Thanks anyways though.

    # January 26, 2013 at 11:36 pm

    @adixon Just for fun, try placing the svg line below the otf.

    # January 27, 2013 at 12:55 am

    Looks like no dice. If it helps eliminate other possibilities, I’ve also tried other webfonts in the same place (I’ve confirmed that they work in other webpages), as well as reconverting a whole new font set via fonsquirrel. So I figured I had a messed up semicolon or something, and replaced the whole chunk of code with a copy of the working one, and only swapped out names and file locations. Still nothing.

    This is just super confusing to me. Does the font show up on anyone else’s computer? I checked on my housemate’s, and it was replaced with a system font.

    # January 27, 2013 at 1:15 am

    @adixon Try creating a separate stylesheet and paste the @font-face code into it. Now, below that paste this

    h1 {
    font: 1.7em ‘goudy-italic’;
    }

    Only call the new stylesheet in your HTML document. Does it render?

    # January 27, 2013 at 1:18 am

    @adixon Oh duh! You’re syntax is wrong. try `@font-face` not `@fontface`

    # January 27, 2013 at 10:51 am

    oh god dammit :D THANK YOU for bearing with my stupidity on this. correct syntax fixes problem completely. You have truly saved me from hours of misery and annoyance on this one.

    # January 27, 2013 at 11:26 am

    You’re welcome.

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

You must be logged in to reply to this topic.

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