Problem With @font-face Webfonts

[seansean11]

Hey Guys,

I decided to post because I’ve encountered this issue now with a couple of fonts. On this occasion I am importing the webfont “raleway thin”. I have done everything correctly to get it running in my css and applied it to a couple of elements. Raleway Thin is part of the League of Moveable Type.

*The problem is that the quality of the font appears totally distorted when blown up to larger sizes and mildly distorted at smaller sizessee photo. Now, the font should look like this. I download the files originally from The League of Moveable Type and then tried using it through Google Fonts and had the same results. Here’s my code:

@font-face {

font-family: 'RalewayThin';

src: url('fonts/raleway_thin-webfont.eot');

src: url('fonts/raleway_thin-webfont.eot?#iefix') format('embedded-opentype'),

url('fonts/raleway_thin-webfont.woff') format('woff'),

url('fonts/raleway_thin-webfont.ttf') format('truetype'),

url('fonts/raleway_thin-webfont.svg#RalewayThin') format('svg');

font-weight: normal;

font-style: normal;

}

I am thinking that maybe the font is showing up correctly on the example website because he is using typekit. Could this be true??

I appreciate any sort of input.

Thanks,
Sean

[seansean11]

Sorry about that…I made an incredibly dumb mistake. I didn’t reference the font correctly in my css. Everything seems to be working fine.

[chrisburton]

In general, Typekit seems to render web fonts better than Google.

[seansean11]

Thanks Christopher… Turns out I didn’t make a dumb mistake. What I did was turn the font-weight down to 100 and it looks acceptable (although not perfect). I am now having the same problem with “Ostrich Sans Bold” which is also a League of Moveable Type font. This font has a racetrack (double line characteristic) that barely renders at font-weight: 100, and not at all at any heavier weight.

This is my first experience trying to use @font-face to call in custom fonts. So my new question is what’s the low down on utilizing this technique? Are there only certain fonts that really render well? or am I just having bad luck with the fonts that I chose in my original mock-up??

[chrisburton]

@seansean11 Have you tried setting the font-weight higher? Can you post a screenshot and your code? The issue you may be having could be the design of the typeface itself.

Edit: I just checked the web font rendering and it is due to the design like I mentioned above. Ostrich Sans wasn’t really intended for the web nor was it hinted for the screen which is why it looks the way it does.

[seansean11]

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

[chrisburton]

No I mean that Ostrich Sans wasn’t meant for the web and it needs to be hinted for the screen. That is why it looks hideous (unless you set the font-size extremely high).

The smallest size I could get it to render best is at 70px. The font-weight probably won’t change anything, though. I would leave that alone.

[seansean11]

Thanks for the response @ChristopherBurton, I just learned a thing or two that I didn’t know before, after googleing “font hinting”. Would it be safe to say though that web fonts provided by sites like Google Fonts, Font Squirrel, and Typekit wont cause too many problems (or in other words, they should be hinted)? Or is it hit or miss with custom fonts?

@ChrisxClash I think I am actually going to stick with raleway thin because it was the font I originally used in the mock-up (I wanted a thin font). The odd thing though is that I had the opposite problem… When the font-weight was left at default it rendered much thicker than it does in Photoshop. After changing font-weight to 100 it seems to render at or around the thickness that it has in Photoshop.

[chrisburton]

Google and Typekit are similar because Typekit helped Google with its web font rendering however, Typekit does a far better job due to hinting their fonts. Google doesn’t seem to do this and I completely advocate against using Google’s web font service for other obvious reasons. I also have to admit that Typekit isn’t always phenomenal.

Font Squirrel is just a cross-browser support system.

[Author]

Posts