Forums

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

Home Forums CSS Problem With @font-face Webfonts Re: Problem With @font-face Webfonts

#105734
seansean11
Participant

Thanks @ChristopherBurton I assume by your comment that these fonts should render as they do in Photoshop (Raleway Thin and Ostrich Sans Bold) or in the case of “raleway thin”, as it does on this site. Here are the screen shots of both of the fonts at their standard font weight. Raleway Thin and Ostrich Sans Bold. I’d say that they are pretty hideous at best. Here they are with font-weight: 100; as I set them in my css… Raleway Thin and Ostrich Sans Bold. Here is my code for both of those elements:

h2 {
font-family: "RalewayThin", serif;
font-size: 450%;
display:block;
color:#444;
padding: 25px 0;
margin: 0 0 25px 0;
font-weight: 100;
background: url("img/bg_titlebar.png") repeat-x left;
text-align: center;
text-transform: uppercase;
vertical-align: center;
}

h4 {
font-family: "OstrichBold", serif;
font-size: 300%;
color: #fff;
vertical-align: center;
text-align: center;
font-weight: 100;
}

As for my @font-face you can take a look at the code above (from the first post). I set this up the same for both fonts. I can assure you that this is working, because I have checked with firebug. Sorry I don’t have a live example, I am working locally right now.

-Sean