Grow your CSS skills. Land your dream job.

@Font Looks Bad In WebKit Browsers

  • # November 30, 2011 at 6:24 pm

    I thought so too. I tried that and it didn’t fix my problem :/.

    # November 30, 2011 at 7:02 pm

    You had my hopes up!
    Just tried it and it didn’t work for me. I tried the code on some Google Web Fonts that I’ve known to have some issues in the Windows version of Chrome and Safari. The way I understand it, it is more dependent upon the anti-aliasing process. Chrome for Windows does anti-alias but just not as good as what DirectX can do. I looked into the above code, and it seems to only affect WebKit browsers on the Mac. Anyone else have any experience with this? I would love to be proved wrong!
    You can impose a hack and add

    text-shadow: 0 0 1px rgba(###,###,###,.5)

    but that doesn’t really address the issue.

    # November 30, 2011 at 7:29 pm

    Oh, right. I forgot that solved the Mac issue. But yeah, I don’t use Google web fonts so I can’t answer there. However, I haven’t seen issues with it on Typekit (at least with the fonts I use).

    # December 1, 2011 at 12:50 am

    Try using the fontsquirrel.com @FONT-FACE GENERATOR with your fonts and click the expert settings. I can’t remember off the top of my head at this time without going to fontsquirrel, but I believe there used to be a setting to help font rendering. Anyway for what ever reason it generates fonts better then most. I had the same issue with chrome fonts and a lot better luck generating my own. Good luck.

    # December 1, 2011 at 12:31 pm

    Interesting read and lots of good info. I wish Chrome would just upgrade their rendering process, makes me feel about them like I do about IE a little bit.

    # December 1, 2011 at 12:37 pm

    @standuncan – it’s unfortunate, but there are a few bugs in Chrome. It does’t handle full-page backgrounds very nicely as well as websites heavy on shadows. I’m actually to to do workarounds for Chrome recently, pain in the ass!

    # July 29, 2012 at 10:14 pm

    Hmmm… I don’t completely agree here. First of all I have the same issue. My font-family fonts look horrible on Chrome Windows. Now, fact is, I am using the same font as CSS tricks here for testing and the body font of this site looks pretty awesome to me in Chrome. Ever checked out? So, as mentioned before in this thread, I don’t think this is just a rendering issue based on the fact Chrome uses a software approach. I think it’s a conversion problem maybe? Would be interesting to know in detail how CSS tricks approached this issue for their site?

    # July 29, 2012 at 10:15 pm

    Typekit

    # July 29, 2012 at 10:28 pm

    As @ChristopherBurton mentioned, Typekit is the answer. They individually hint each typeface for each browser and OS. Also, you may learn a bit more from reading this: http://daneden.me/2012/01/why-do-my-fonts-look-so-bad-in-x/

    # July 30, 2012 at 1:05 am

    Yeah. Found the source of the problem. I used FontXChange to convert fonts which seems to have issues to convert them properly for Windows. Fontsquirrel and all good. So – if any of you use FontXChange just keep an eye out.

    # September 7, 2012 at 7:55 am

    guys, can anyone help me out. this is weird. I am using a font named “Existence-UnicaseLight” using @font-face.

    when i am appling just

    @font-face {
    font-family: “Existence-UnicaseLight”;
    src: url(“../fonts/Existence-UnicaseLight.eot”);
    src: local(“☺”), url(“../fonts/Existence-UnicaseLight.woff”) format(“woff”), url(“../fonts/Existence-UnicaseLight.otf”) format(“opentype”), url(“../fonts/Existence-UnicaseLight.ttf”) format(“truetype”), url(“../fonts/.svg#Existence-UnicaseLight”) format(“svg”);
    }

    @font-face {
    font-family: “Existence”;
    src: url(“../fonts/Existence-UnicaseLight.eot”);
    src: local(“☺”), url(“../fonts/Existence-UnicaseLight.woff”) format(“woff”), url(“../fonts/Existence-UnicaseLight.otf”) format(“opentype”), url(“../fonts/.svg#Existence-UnicaseLight”) format(“svg”);
    }

    chrome just doesnt show anything and foolly when i apply

    @font-face {
    font-family: “Existence-UnicaseLight”;
    src: url(“../fonts/Existence-UnicaseLight.eot”);
    src: local(“☺”), url(“../fonts/Existence-UnicaseLight.woff”) format(“woff”), url(“../fonts/Existence-UnicaseLight.otf”) format(“opentype”), url(“../fonts/Existence-UnicaseLight.ttf”) format(“truetype”), url(“../fonts/.svg#Existence-UnicaseLight”) format(“svg”);
    }

    @font-face {
    font-family: “Existence”;
    src: url(“../fonts/Existence-UnicaseLight.eot”);
    src: local(“☺”), url(“../fonts/Existence-UnicaseLight.woff”) format(“woff”), url(“../fonts/Existence-UnicaseLight.otf”) format(“opentype”), url(“../fonts/.svg#Existence-UnicaseLight”) format(“svg”);
    }

    and define : body {
    font: 13px/1.5 ‘CALIBRI’, Arial, ‘Liberation Sans’, FreeSans, sans-serif;
    }
    it woks. wtf***.

    can ansy one help also how can I stop Chrome rendering my font bad.

    # September 7, 2012 at 8:02 am

    okay i solved by myself.
    That was because .ttf wasn’t defined. can someone help me in antialising nature of Chrome???

    # September 7, 2012 at 8:10 am

    -webkit-font-smoothing: antialiased;

    # January 23, 2013 at 9:32 pm

    `font-smoothing: antialiased;` is not the answer to anything but icon-fonts and large display type.

    http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/

    # January 23, 2013 at 10:52 pm

    Try this


    @font-face {
    font-family: 'akzidenz-grotesk_bqregular';
    src: url('fonts/akzidenzgrotesk-regular-webfont.eot');
    src: url('fonts/akzidenzgrotesk-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/akzidenzgrotesk-regular-webfont.svg#akzidenz-grotesk_bqregular') format('svg'),
    url('fonts/akzidenzgrotesk-regular-webfont.woff') format('woff'),
    url('fonts/akzidenzgrotesk-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

    Notice the order – eot on top, followed by svg. Apparently, chrome and safari render the fonts well when svg is at the top, or the second from top at least (eot is for IE). I’ve noticed that this at least removes the jagged text one encounters in Chrome and Safari. The flip-side is that some fonts might appear smudged.

Viewing 15 posts - 16 through 30 (of 35 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".