Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS @fontface problem with chrome

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #42221

    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!

    #122182
    Jozsef K.
    Participant

    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 ?

    #122189

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

    #122424

    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”)

    #122425
    chrisburton
    Participant

    @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.

    #122436

    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.

    #122440
    chrisburton
    Participant

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

    #122447

    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.

    #122448
    chrisburton
    Participant

    @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?

    #122449
    chrisburton
    Participant

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

    #122485

    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.

    #122486
    chrisburton
    Participant

    You’re welcome.

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.