CSS-Tricks

doobiedubois

Hello All,

I've recently embed a font, Josefin Sans, found in Google Fonts, to my site. When previewing in Browserlab, it renders perfectly in all the latest browsers but adequate to poor in older browsers. I did some research and discovered this is not uncommon. Therefore I'd like find a alternative to Google Fonts-- some place where one will have fewer rendering issues.

I've heard good things about fontSquirrel and webINK. Are they more reputable? Are there other font sources I should consider?

eagleworks

I believe the only genuine way to dodge the rendering issues of @fontface would be to use something like Cufon.

doobiedubois

Thanks for reply, eagleworks, That's good to know. I read someplace that cufon doesn't work as well in IE6 and 7.

ChristopherBurton

In my opinion, I like fontsquirrel. It gives you all the font types including IE support and actually generates the CSS for you. Although it's pretty simple to do yourself.

doobiedubois

I tried using Cufon and fontsquirrel but I got "error parsing styles" for both. I'm wondering if it is the placement of the code?

jimsilverman

you're going to run into the same issue with any @font-face solution (google fonts, fontsquirrel, typekit, etc.)

the thing is older browsers on windows use windows' font smoothing, so some fonts will look like crap. a classic example of this helvetica vs arial on windows. helvetica renders like chicken scratch and arial looks just fine.

probably getting a bit off topic, but here's a good read on why the fonts look different based on browser/OS: http://www.joelonsoftware.com/items/2007/06/12.html

doobiedubois

Thanks, Jim.

I've read so much this past few days fonts that I'm confused. So, is it not possible to find a decent alternative to web safe fonts in Windows? (My font looked decent in IE9.)

ChristopherBurton

@doobie, how did you go about placing the @font-face into your stylesheet? Can you paste your code?

doobiedubois

@ChristopherBurton, I'm no longer getting an error message but it's still not working for me.
Here is the code:

<link href="main.css" rel="stylesheet" type="text/css" />
<style type="text/css">

@font-face {
    font-family: 'Panefresco600wtRegular';
    src: url('type/Panefresco600wt-Regular-webfont.eot');
    src: url('type/Panefresco600wt-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('typePanefresco600wt-Regular-webfont.woff') format('woff'),
         url('typePanefresco600wt-Regular-webfont.ttf') format('truetype'),
         url('typePanefresco600wt-Regular-webfont.svg#Panefresco600wtRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

</style>

ChristopherBurton

Ok, now when you're styling your text how do you code it?

Like this?
e.g.

font: normal 20px "Panefresco600wtRegular";

Also try adding another forward slash before "type"
Copy/Paste

@font-face {
    font-family: 'Panefresco600wtRegular';
    src: url('/type/Panefresco600wt-Regular-webfont.eot');
    src: url('/type/Panefresco600wt-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/typePanefresco600wt-Regular-webfont.woff') format('woff'),
         url('/typePanefresco600wt-Regular-webfont.ttf') format('truetype'),
         url('/typePanefresco600wt-Regular-webfont.svg#Panefresco600wtRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

doobiedubois

Hey, that extra / inserted before "type" worked! Thanks a lot for tip, Christopher.

ChristopherBurton

No problem :)

Forums Get help. Give help.

Howdy, Stranger!

Categories

Tips