@fontface problem with chrome

[Historical Forums User]

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!

[Jozsef K.]

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 ?

[Historical Forums User]

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

[Historical Forums User]

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

[chrisburton]

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

[Historical Forums User]

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.

[chrisburton]

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

[Historical Forums User]

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.

[chrisburton]

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

[chrisburton]

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

[Historical Forums User]

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.

[chrisburton]

You’re welcome.

[Author]

Posts