Grow your CSS skills. Land your dream job.

@font-face rendering issue in Chrome for PC

  • # October 8, 2012 at 9:44 pm

    @cherie What text exactly are you having issues with? It’s hard to debug since you’re code is inline styled. Have you tried the following:

    `-webkit-font-smoothing: antialiased;`

    # October 8, 2012 at 9:54 pm

    Ok, so i have now tried:

    -webkit-font-smoothing: antialiased;

    -webkit-text-stroke: 1px transparent ;

    @media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
    font-family: ‘ResagokrLight';
    src: url(‘../fonts/ResagokrLight-webfont.eot’);
    src: url(‘../fonts/ResagokrLight-webfont.eot?#iefix’) format(‘embedded-opentype’),
    url(‘../fonts/ResagokrLight-webfont.woff’) format(‘woff’),
    url(‘../fonts/ResagokrLight-webfont.ttf’) format(‘truetype’),
    url(‘../fonts/ResagokrLight-webfont.svg#ResagokrLight’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }}

    text-shadow: 0 1px 0 rgba(0,0,0,0.01);

    So far all areas that i have applied it h1, h2 etc and body still do not render the fonts correctly. Even the standard font family:

    font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;

    # October 8, 2012 at 10:43 pm

    I am using a mixture of:

    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke: 1px transparent;
    text-rendering:optimizeLegibility;

    While its not perfect, it is a lot better

    # October 8, 2012 at 11:34 pm

    @cherie From what I’ve read, you cannot use @font-face inside Media Queries (some bug issue).

    Edit: The bug causes a few browsers not to display the font.

    It could be the optimization of the font itself so why don’t you take a screenshot and upload it to http://tinypic.com and paste the URL here so I can take a better look.

    # October 10, 2012 at 6:36 am

    Have you tried this? I’m not sure exactly why, but this has worked for me various times:



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

    @media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
    font-family: 'ResagokrLight';
    src: url('../fonts/ResagokrLight-webfont.svg#ResagokrLight') format('svg');
    font-weight: normal;
    font-style: normal;
    }}

    # October 10, 2012 at 9:16 am

    @rockmole Why would you set @font-face twice with the same font format?

    # October 10, 2012 at 9:22 am

    Not sure to be honest :P I came across it in another forum some time ago and decided to give it a shot. My fonts then started rendering fine in Chrome. It’s possible that it’s not bulletproof, but from my tests (on Browserlab and on various friends computers) this seems to work well.

    # October 10, 2012 at 11:11 am

    Remove the media query and it should still work.

    # October 10, 2012 at 11:49 am

    Without the media query it won’t render aliased on Chrome for PC. Here are screenshots I just made. Right shows it with media query included, left without.

    [Screenshot](http://www.rockomole.com/misc/font-rendering-chrome.jpg “Font Rendering Chrome PC”)

    These were taken from Browserlab, but I’ve seen the same directly from a PC. I’m baffled as to why this should work, but it seems to be doing the trick.

    I’d post a link to the forum where I found this, but I can’t find it anymore :/

    # October 10, 2012 at 11:52 am

    *antialiased

    # October 10, 2012 at 12:13 pm

    @rockmole use `-webkit-font-smoothing: antialiased;`

    and if that doesn’t work, move the SVG version above the woff.

    # October 10, 2012 at 12:33 pm

    By the way, did you convert that font using Font Squirrel?

    # October 19, 2012 at 3:39 pm

    I’m afraid -webkit-font-smoothing has no effect in Chrome PC, and moving SVG above WOFF makes the font fail to load (FF & Safari mac)

    and yeah, I used font-squirrel’s code generator

    # October 19, 2012 at 3:52 pm

    @Rockmole That’s weird. Sometimes messing with the settings can have an effect on the outcome of converting the files. If you didn’t, I bet it’s just due to not being optimized properly.

    # October 19, 2012 at 4:03 pm

    From what I’ve read, it’s a recurring problem with Chrome. It struggles to render a lot of fonts properly, if not all (even Google fonts, ironically). I’d put my money on Font-Squirrel’s optimization being right and that Google needs to do some work on Chrome…

    Why is it that @font-face shouldn’t be in media queries?

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

You must be logged in to reply to this topic.

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