Adtrak News.

Skip to content

FIXED! Font-Face Chrome Rendering

Posted on by Sam Goddard

Times New Roman - web safe fontFor a while now web designers have been tackling the issue of fonts on the web. Times have now changed from the days of designing strictly in web-safe fonts (Arial, Tahoma, Georgia etc.) to using JavaScript (Cufon) to render more fancy fonts.

With a huge wealth of fonts (both paid and free) now readily available online to designers, rendering fonts online has become more of an issue. Sure, your website may look great in Photoshop, but how are you going to emulate that intricate font across multiple browsers?

There are a variety of font services out there: fonts.com and Google fonts are the big players; however we decided to go down the route of @font-face, as we have a large collection of bought fonts already that we could utilise through @font-face.

Skip To The Fix! »»

font-face

@font-face is a CSS rule which allows you to download a particular font from your server to render on a webpage if the user hasn’t got that specific font installed. This means that web designers no longer have to adhere to a particular set of ‘web safe’ fonts that the user has pre-installed on their computer, or rely on users having JavaScript enabled. This works by turning the font file into a @font-face kit using an online generator like Font Squirrel.

font-face vs Chrome

We have been using @font-face at Adtrak for a while now, and have found only a few issues with it – the main one being rendering in Chrome. The first time I used @font-face; I loaded my website in Google’s browser and was greeted by a jagged, harsh looking font render – nowhere near as nice as Firefox. After a quick search, it became apparent that I wasn’t alone in the experience. I struggled to find a decent fix for this; one method I did use for a while added a CSS text shadow to overcome the jagged edges, but this wasn’t a great, full fix.

The FIX!

After experimenting myself, I stumbled across what appears to be a decent, very easy fix for this issue. It appears that Chrome utilises the .svg file in the @font-face kit, and doesn’t like being called last. Below is the standard call for @font-face using CSS:

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

As can be seen in the example, the .svg file comes last in the list of called URLs. If we amend the code to target webkit browsers, then tell them to solely utilize the .SVG file.

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

@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.svg') format('svg');

}
}

Try It Yourself

If you want to try this out, set up two identical websites, and change the .svg to come first in one, and last in another, then flick between the two – you will be able to see the huge difference this makes to the render quality of the font. Your graphic designer will love you for it. For an example of this, check out the demo below:

@font-face Rendering with the Fix Applied

(click for LIVE demo)

@font-face Rendering without the Fix Applied

(click for LIVE demo)

 

 

About Sam Goddard

Sam Goddard

This entry was posted in Web Design. Bookmark the permalink.
  • Shelds.

    Thanks for this!

  • Scott Barron

    Excellent thanks. It sure beats the pants off using the text-shadow method….

  • Sam Goddard

    this fix changed my life!

  • Washhouse Design

    Great a huge thanks, seems to work for me

  • Darren Picks

    this has been annoying me for months! Seriously, thank you so much!!

  • Nicole Cox

    had no luck with the -webkit-text-shadow hack and have been having to put up with Firefox as my main browser but this works a dream, thank you SO MUCH, this has been annoying me for absolutely ages and i’m very happy to be using Chrome (without having to look at horrible rendering) again, thanks so much!! :)

  • Designer First

    This issue was driving me nuts! Thanks for fix!!

  • http://twitter.com/thinkontheclock Matt MacIntyre

    This is a really great technique, thanks. I have one question though – have you run into problems with up-to-date Firefox, now? After moving the .svg up in the hierarchy above the .woff (supported by FF), the font no longer renders in Firefox for me. Move it back and the font returns, although Chrome also returns to the jagged version.

    This can be handled with conditional stylesheets I suppose though I’d like to avoid that. Thoughts?

    • Sam Goddard

      Hi there Matt, glad this worked for you and thanks for the comment. I have not come across any problems with Firefox using this method, which font are you trying to use? Can you paste the code or provide a link to the site for me? I can have a look into it for you, I agree conditional stylesheets are unfortunately not a good enough fix, it’s a shame Chrome can’t just use DirectWrite as it’s renderer!

    • Russell

      I made the same mistake. I copied the whole line including the “;”… that ends the statement and Firefox never saw the font-face rule.just make sure you use the comma after the .svg and keep the semi-colon at the end!

      Awesome fix too Sam! My site did need some Line height adjustments after chrome started rendering it nicely!

      • http://www.facebook.com/samuelgoddard Sam Goddard

        ahhh I see! Hopefully this is the issue Matt was having too! Some fonts are rendered really differently without the fix in place, the last font in the example, Bebas, looks REALLY bad without it, it’s as if the font size has been drastically reduced, I guess this is why you had to amend the line height? Hope all is looking good now though! Thanks for the comment :)

        • http://twitter.com/thinkontheclock Matt MacIntyre

          Thanks again for your time on this Sam. The issue was with the Cicle font from FontSquirrel, but the issue was ultimately the same as Russell’s. Damn semicolon haha.

      • http://twitter.com/thinkontheclock Matt MacIntyre

        This is precisely the issue I encountered, just fixed it and then came here to comment and found your answer! Excellent. I had shifted the entire line up, closing the font-face declaration early. All fixed!

  • http://tdoyle.me/ Tom Doyle

    I found out about this a few days ago too, the only problem I’m having now is that svg fonts don’t allow pseudo-italics

    • http://www.facebook.com/samuelgoddard Sam Goddard

      Hi there Tom, thanks for the comment, which font are you using? Does it have an actual separate italic weight? If it does you could convert that as well and target the fonts you want to be italic with that instead of the standard font. If not I don’t think there’s a quick fix unfortunately, some fonts can end up looking a bit strange when using pseudo-italics, I think that’s why .SVG files disallow it when using @font-face. Let me know how you get on

  • http://twitter.com/JAaronG Aaron Green

    I have just started using @font-face, but the Google fonts come with only the woff format from what I can tell. What are the advantages of including the others and why wouldn’t Google recommend including them?

    • http://www.facebook.com/samuelgoddard Sam Goddard

      Hi Aaron, thanks for your comment, which font are you using and how are you generating a font-face kit? I personally use font squirrel [ http://www.fontsquirrel.com/fontface/generator ] to create my font-face kits. I have never come across a font that just supplies a .WOFF file, although I have seen a few that don’t include a .SVG file. From what I understand, the .SVG file is the most experimental, and completely unsupported by Internet Explorer. This may be why some companies decide to leave them out. This fix however calls the .EOT file (which is supported by IE) first, making it work perfectly across all versions on IE.

      The only downside I can see from utilizing a .SVG file is they are slightly higher file size due to their increased quality. This has been brought up in discussion before as a negative, however I don’t believe the 10-20kb size increase is a problem compared to trying to explain to a client why the font on their new website looks unreadable in Chrome.

  • xeroCuil

    This… is wonderful. Thank you.

  • Guest

    Epic

  • http://www.linkedin.com/in/matthewtagg Matt Tagg

    Speaking of Chrome, this website scrolling is jerky in latest Chrome and the Beta (Version 23.0.1271.17 beta ) on OSX at 2560 x 1440

    • http://www.facebook.com/samuelgoddard Sam Goddard

      Hi Matt, cheers for your comment, how exactly do you mean? I assume you are on a retina display Macbook pro?

      • http://www.linkedin.com/in/matthewtagg Matt Tagg

        While not *retina* specific it does happens more at higher resolutions, yes. In this instance I’m working off my 27″ Thunderbolt display.

        The slowdown may be because of an inefficient Chrome Paint() method. You can see this for yourself using chrome://tracing.

        • http://www.facebook.com/samuelgoddard Sam Goddard

          I see, thanks for the heads up! We are planning on updating our site soon so will bear this in mind :)

  • Zoltan Hawryluk

    Thanks for sharing this really cool hint. I’m sure designer co-workers will thank you as well. :-)

  • http://www.marieguillaumet.com/ kReEsTaL

    Hi Sam!

    First, thanks for sharing the result of your work. I’m very interested in @font-face optimization, and I read your post with much interest.

    However, calling the SVG file *before* the WOFF file has some major shortcomings:
    - first, I didn’t notice any notable improvement between the SVG and WOFF generated @font-face in Chrome used with Windows XP (but I guess it depends on which font you use, and on the quality of the generated files, without even speaking of the OS and browser rendering capacities);
    - in Chrome, Safari and Opera (at least – I didn’t test iOs, Android nor Blackberry, which support SVG fonts, too), both of the SVG and WOFF files are downloaded, which is bad for your website’s performances. It’s obviously a bug;
    - at last, browsers which support SVG fonts only partially implement the specs, which means you cannot seriously use this kind of font. Even though every browser would perfectly support the specs, SVG fonts do not fit HTML text because they lack of the subtleties of type rendering (i.e. hinting), which the OTF fonts do not.

    In a nutshell: do not use SVG fonts. :-)

    • http://twitter.com/matt_hisamoto Matt Hisamoto

      To piggy back off of this, I want to lay out an edge-case against SVG that I just figured out:

      IF using font-face, and applying a font to a password input, viewing on iOS < 6, iOS's password hinting nukes the text in the password field, making it impossible to put in a password.

      Rather than drawing a bullet once you input the next character, it shows only the current character, and after a second it clears the whole field out.

      After some digging, found out it was the font causing the problem, and furthermore, returning the SVG back to the last item in the font-face list fixed this.

      Now this is just an assumption but it seems like using an SVG font in a password input field in iOS lower than 6.0 just plain doesn't work.

      • http://www.facebook.com/samuelgoddard Sam Goddard

        Hi Matt, thanks for your comment, very interesting point, however I am a little bit confused as to why you would want to render font-face in a password input field? It seems a bit strange to me, could you give me an example of when this would be beneficial?

        • http://twitter.com/matt_hisamoto Matt Hisamoto

          It’s not even that I “wanted to” we were just using Avenir for the whole site, minus some headings.
          Just wanted to share what I found.

          The fix was to use standard fonts in the password fields.

  • Michael

    Wow! Excellent and simple fix!

  • http://twitter.com/brandonb927 Brandon Brown

    Holy crap this is an awesome fix for Chromes dismal @font-face rendering…

  • RichardL

    Brilliant – works a treat! Thanks.

  • henk

    Awesome, this did the trick. Thank you very much!

  • Appel

    The thing is , that with this fix it makes CHROME render fonts better, but other browsers rendering sucks big time and makes font look too bold. :/ So there is no fix at all.

    • http://www.facebook.com/samuelgoddard Sam Goddard

      Hi Appel, cheers for the comment, which browsers are you talking about exactly? Do the demo links in this article display too bold or just a certain font you are using? I have not come across this issue yet

  • http://www.facebook.com/samuelgoddard Sam Goddard

    After a bit of research it unfortunately looks like this is an issue with Google fonts. I don’t personally have much experience with using their service myself, however if there’s any way you can get your hands on the actual font file, you can convert it using fontsquirrel and utilize it using the method explained here. Let me know how you get on! :)

  • http://www.facebook.com/samuelgoddard Sam Goddard

    Any update on your progress Tom?

  • petersjoo

    Thanks!

  • http://www.facebook.com/fred.oberg Fredrik Öberg

    Works fantastic!!

  • Ronan Haughey

    Great stuff. Its working great across all browsers apart from Chrome on windows. Awful jagged fonts. Any Ideas? much appreciated.

    • http://www.facebook.com/samuelgoddard Sam Goddard

      Hi Ronan, what font are you using and how are you calling it, can you link me to the site?

      • Ronan Haughey

        Proxima Nova. The set up is identical to your suggested format. justjctennis.com
        Thanks

        • http://www.facebook.com/samuelgoddard Sam Goddard

          Hi Ronan. just had a look at your CSS, you need to remove the ID tag from the end of your .SVG call, see below:

          @font-face {
          font-family: ‘ProximaNova-Regular’;
          src: url(‘fonts/ProximaNova-Regular.eot’);
          src: url(‘fonts/ProximaNova-Regular.eot?#iefix’) format(‘embedded-opentype’),
          url(‘fonts/ProximaNova-Regular.svg#ProximaNova-Regular’) format(‘svg’),
          url(‘fonts/ProximaNova-Regular.woff’) format(‘woff’),
          url(‘fonts/ProximaNova-Regular.ttf’) format(‘truetype’)
          ;

          replace with

          @font-face {
          font-family: ‘ProximaNova-Regular’;
          src: url(‘fonts/ProximaNova-Regular.eot’);
          src: url(‘fonts/ProximaNova-Regular.eot?#iefix’) format(‘embedded-opentype’),
          url(‘fonts/ProximaNova-Regular.svg’) format(‘svg’),
          url(‘fonts/ProximaNova-Regular.woff’) format(‘woff’),
          url(‘fonts/ProximaNova-Regular.ttf’) format(‘truetype’)
          ;

          Let me know if that fixes it for you?

          EDIT: also remove it from the semibold call (just noticed there’s two fonts)

          • Ronan Haughey

            Thanks. It still seems to be very ugly text, still jagged especially when on a dark background. Any Ideas? Am i right in thinking theres no font smoothing that can be used?

          • http://www.facebook.com/samuelgoddard Sam Goddard

            very strange, almost out of ideas, have you tried to smooth out the font in any other way using jquery or CSS at all? If so try removing it, I notice you use -webkit-font-smoothing, try removing this entirely from the CSS file and see if it gets rid of the jagged font?

            EDIT: just noticed a typo in your CSS for the font call

            @font-face {
            font-family: ‘ProximaNova-Semibold’;
            src: url(‘fonts/ProximaNova-Semibold.eot’);
            src: url(‘fonts/ProximaNova-Semibold.eot?#iefix’) format(‘embedded-opentype’),
            url(‘fonts/ProximaNova-Semiboldr.svg’) format(‘svg’),
            url(‘fonts/ProximaNova-Semibold.woff’) format(‘woff’),
            url(‘fonts/ProximaNova-Semibold.ttf’) format(‘truetype’);
            font-weight: normal;
            font-style: normal;
            }

            the svg has a r on the end you need to delete

          • Ronan Haughey

            Its still very poor on the smaller text and on the darker backgrounds. No I havn’t, can you suggest any jquery or CSS font smoothing techniques? Many Thanks

          • http://www.facebook.com/samuelgoddard Sam Goddard

            That’s very strange :( I’m not entirely sure why it doesn’t seem to be working, all seems to be implemented fine. The only other option I can think of is the text-shadow method, however i’ve never really had much luck with it myself, check out this link for more information: http://www.icondeposit.com/blog:how-to-properly-smooth-font-using-css3

            EDIT: I would also suggest slightly tidying up the call, CSS can be funny about line breaks etc sometimes, here is how I would call the fonts:

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

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

          • Ronan Haughey

            I think i’ve cracked it, it seems there was an issue with my svg file itself, I converted it again and its all working great now! very odd. Thanks very much for you help, much appreciated.

          • http://www.facebook.com/samuelgoddard Sam Goddard

            Awesome! Just checked out the site and it looks a million times better, glad you got it sorted!

  • Ronan Haughey

    Great Stuff. Works across all browsers apart from Chrome on Windows. Awful jagged fonts. Any Ideas? Much Appreciated.

    • Guest

      Works for me in Chrome/Windows. What version of Windows are you running?

    • http://www.facebook.com/samuelgoddard Sam Goddard

      hmm very strange! The fix should be specifically for that! Can you elaborate a bit more on your setup?

  • Nina

    DAMN, I usually don’t comment when I’m troubleshooting an issue, but this fixed an issue I was having on a site where the font was showing spaces as square boxes in Windows Chrome. THANKS!!!

  • Nina

    DAMN, I usually don’t comment when I’m troubleshooting an issue, but this fixed an issue I was having on a site where the font was showing spaces as square boxes in Windows Chrome. THANKS!!!

  • Luc

    You just saved my life! The difference is remarkable. Thanks so much!

  • http://chooseclever.com/ Bill Patrianakos

    This may seem obvious but it caught me and made me think this fix doesn’t work – when you rearrange your SVG file before your woff and ttf in the declaration, make sure to put #FontName after the name of the svg font. For example, in my case I’m using Fanwood so the declaration would be:

    url(‘../font/fanwood-webfont.svg#FanwoodRegular’) format(‘svg’),

    The “#FanwoodRegular” part is the SVG font name which is NOT necessarily the same name as the SVG font file itself. In my case it didn’t work until I opened up the SVG file in a text editor and found the part of the file near the top. I had to copy and paste the value of that id after the .svg# for it to work in Chrome. This fix definitely does work but there’s a lot that can trip you up.

  • unlightening

    So for those of us that have no idea how to even access this particular code to change it, does someone mind explaining how to even get there?

    • http://www.facebook.com/samuelgoddard Sam Goddard

      HI there Unlightening, the font-face styling will (most likely) be in your main .css file, there is a quick ‘how to use’ guide on the font-face website, http://www.font-face.com/ or you can find a few helpful guides on google. Hope this helps!

  • http://www.facebook.com/asimalikhi Asim Ali

    Great it helped a lot

  • onur

    i dealed with this for weeks and my customer was almost killing me, i owe you, thank you so much!

  • Riccardo Caroli
    • http://www.facebook.com/samuelgoddard Sam Goddard

      awesome, I will add these as sources to the blog post, think this is finally a bulletproof fix!! :)

  • Diego Rocha

    Thanks a lot! I was looking for this for a long long time ago!

  • Pepe

    Great trick, thank you very much! Love it!

  • http://twitter.com/shabith shabith Ishan

    Wow this helps a lot. thank you so much!

  • Rob C

    Thanks a lot. Great fix! Worked for me on all webkit browser on all OS.

  • http://plumts.com Nemanja Ćosović

    This “fix” works in Chrome, but NOT IN Firefox. Firefox just falls apart. This is NOT A GOOD SOLUTION. You can test it yourself.

    • http://www.facebook.com/samuelgoddard Sam Goddard

      this works fine for me in firefox? I use it every day on various different sites… can you provide your code and I’ll try see where you are going wrong?

      • http://plumts.com Nemanja Ćosović

        Its not a question of code. Simply this solution does not work. I have tested it on my semi-fresh installed machine and on one freshly installed machine and via virtual machine. In all three cases all browsers (except Chrome) would recognize the font but the edges would be jagged. The very same jagged edges we are trying to avoid.

        • http://www.facebook.com/samuelgoddard Sam Goddard

          Strange that you are having this issue, the solution 100%does work, read through the other comments for proof… Like I said, I use this every single day and it works fine across all browsers. Could you link me to the site you are having trouble with? Or is it local?

          • http://nemanja.blog.rs/ Nemanja Ćosović

            Yes, I agree. I can’t disparige others who said that the solution worked for them, but however this is not the case on three machines I used to test this. I tried to test this thoroughly as I could. You see me mentioning Chrome, IE8, FF19 and O12.

            Please, try to understand. I am using a generated Font Squirrel css, but for the testing I have used two pages that were presented here. I visited one with the fix applied and the other without the fix, and the page with fix worked only in Chrome. It did not work in other browsers. Latter I will send you some screenshots. Do you have an email I can send it to?

          • http://www.facebook.com/samuelgoddard Sam Goddard

            the fix only applies for Chrome on Windows so if you are visiting the 2 pages on any other browser they will look identical (both non-fix, and fix links). I am a little confused as to what you are saying isn’t working. If you want to send me screenshots feel free to email me at sam[dot]goddard[at]adtrak[dot]co[dot]uk

          • http://nemanja.blog.rs/ Nemanja Ćosović

            I’ve sent you an email with .RAR archive.

          • http://www.facebook.com/samuelgoddard Sam Goddard

            Hi Nemanja, I have received your email and just been having a look through the screenshots. I understand where you are coming from however that is just how the other browsers render the fonts, they do not look as nice as the .SVG implementation however they are no where near as bad as Chrome without this fix. This fix is specifically to correct the jagged edge issue on fonts in Google Chrome. With or without this fix the other browsers would still look exactly the same as the screenshots you had sent over to me. Hope this makes sense? Let me know what you think?

          • http://nemanja.blog.rs/ Nemanja Ćosović

            Hi Sam, I see your point and its completely valid as far as I’m concerned. My first idea after reading and applying this fix was that all browsers would behave the same, and they simply don’t. Maybe, and just maybe, it would be a good idea to point that out in the text, a little bit more clearly so everybody would understand.

            Thank you for finding this fix and thanks for being open for discussion.

          • http://www.facebook.com/samuelgoddard Sam Goddard

            Hi Nemanja, I would absolutely love it if all browsers worked the same! Unfortunately that’s definitely not the case and I understand your frustration with this 100%. Thanks for the tip, I will add a section to the post about this solely being for Google Chrome and try make it a bit clearer.

            No worries, and thanks for contributing to the discussion! :)

          • http://nemanja.blog.rs/ Nemanja Ćosović

            Thank you for being such a great sport! :)

  • http://plumts.com Nemanja Ćosović

    I’ve tested this solution with W7 (32bit) fresh install, with multiple browsers. Only Chrome works, everybody else (IE8, FF19, O12), the edges are still jagged.

    • http://www.facebook.com/samuelgoddard Sam Goddard

      very strange, have you tried re-saving out the font-face kit, what generator are you using?

      • http://plumts.com Nemanja Ćosović

        Personally I use Font-Squirrel, but all test were performed with the examples with or without fix, provided on this page.

  • http://twitter.com/unsalkorkmaz Unsal Korkmaz

    Main problem is font-weight:bold is not working with svg fonts :< Any workaround?

    • http://plumts.com Nemanja Ćosović

      You do realize that this solution only works in Chrome, right?

    • http://www.facebook.com/samuelgoddard Sam Goddard

      only workaround really is to use the actual bold version of the font family, for example if you were to wrap the parts of the elements you want in bold in a tag, then style that span tag with the bold family in CSS. Hope this makes sense?

      If the font doesn’t have a bold version in the family unfortunately I don’t think there’s a workaround.

    • Jakub

      Don’t use font-weight. Declare fonts and use instead font-weight: bold, font-family: YourFontBold.

  • Webstore

    Same question for me – what when embedding from google fonts?

    • http://www.facebook.com/samuelgoddard Sam Goddard

      Hi guys, unfortunately I don’t believe there’s a fix for Google Fonts at the mo as I believe (may be wrong) that they only implement .WOFF files… I don’t really have much experience with them so maybe someone on here can help you out a bit more? Have you considered moving away from Google Fonts?

  • http://www.facebook.com/samuelgoddard Sam Goddard

    I know it’s crazy, it’s been a known issue for many years now, unfortunately this seems to be the best fix around at the moment. It may not be the best solution but it definitely gives the best results for the time being =)

  • http://www.facebook.com/samuelgoddard Sam Goddard

    Hi Jozko, it appears to look fine for me?? Where exactly am I looking? Very nice site by the way!! =)

  • Sujato Bhikkhu

    Thanks, Sam. I’m using Skolar and Source Sans and they look much better on Chrome on Windows. BUT: my main machine is Ubuntu, and the svg causes the page to crash. This is not an issue with the particular method here, but with svg fonts in general, so far as I can tell. The page loads fine, then crashes (Aww, snap!) when you click anywhere on the page. This is on Chromium 25/Ubuntu 12.10. It seems the workaround, which I haven’t tested, will be to use javascript to deliver the svg font to Chrome on Windows only.

    • http://www.facebook.com/samuelgoddard Sam Goddard

      Hi Sujato, I unfortunately haven’t got much experience with Ubuntu myself so don’t really know what to suggest regarding this issue. If you look into this any further let me know how you get on. Serving the SVG’s up using JS sounds like a pretty good starting point. Keep me posted

  • http://twitter.com/ianhasajob Ian De Val

    Thank you! This also fixed another problem i was having with black rectangles appearing where spaces should be

  • louis

    Elvis is the king, but you’re not bad !

  • Tudor B

    Hello. Thank you for your article.
    But I have a little problem. I have this font BauerBodoniStd, the svg trick doesn’t work on chrome, any ideea?

    t

    • http://www.facebook.com/samuelgoddard Sam Goddard

      Hi Tudor, thanks for your comment. Can you elaborate a bit more, does the font definitely come with a .SVG file? Have you got a link to the site it’s being used on I could take a look at? Hopefully we can figure out why it isn’t working!

      • Jakub

        The problem repeat width SVG on Chrome. Open Sanse SVG have diffirent line-heght in definition. On MAC Chrome “@media screen and (-webkit-min-device-pixel-ratio:0) { – part distroy everything, but on Windows XP it helps in anti-alias, but line height is still diffirent in all html items. I think the problem lays on side the font.

  • http://twitter.com/MichaelAlmondo Michael Almond

    Have you ever had a problem with svg fonts where the text doesn’t go on to a new line and just continues to overflow a div and stays on one line? Couple of sites seem to have done this but weirdly only a few people have reported this, was on Chrome too so not even a stupid IE bug? Thanks :)

    • http://www.facebook.com/samuelgoddard Sam Goddard

      Hi Michael, I think it sounds like you are having the same issue I used to get, does it just happen sometimes? And work fine other times? Have you called the font-face using the media query method, this seemed to fix it for me, see below, try calling your font using this method and it should fix it:

      @font-face {
      font-family: ‘chunk-webfont’;
      src: url(‘../../includes/fonts/chunk-webfont.eot’);
      src: url(‘../../includes/fonts/chunk-webfont.eot?#iefix’) format(‘eot’),
      url(‘../../includes/fonts/chunk-webfont.woff’) format(‘woff’),
      url(‘../../includes/fonts/chunk-webfont.ttf’) format(‘truetype’),
      url(‘../../includes/fonts/chunk-webfont.svg’) format(‘svg’);
      font-weight: normal;
      font-style: normal;
      }

      @media screen and (-webkit-min-device-pixel-ratio:0) {
      @font-face {
      font-family: ‘chunk-webfont’;
      src: url(‘../../includes/fonts/chunk-webfont.svg’) format(‘svg’);

      }
      }

      • http://twitter.com/MichaelAlmondo Michael Almond

        Hi Sam – will try this on a site I’m working on now! The issue I mentioned has never happened to me, just a couple of people flagged it on a site before however it was fine on all devices in the office! Seemed to be quite random though. Since then we removed all the master svg font-faces we used on sites which is a shame as it looks great!
        I Wasn’t sure whether it was like a nightly release bug or even just a ‘faulty’ font-face conversion if that’s even possible! Will see how this goes on anyway and let you know if it gets brought up again! Thanks!

        • http://www.facebook.com/samuelgoddard Sam Goddard

          From what you’re describing it sounds like a known fault with Chrome that is fixed by the code i posted in my earlier reply. We also had to drop SVG prioritizing in our office due to a similar problem however this seems to have fixed it! Let me know how it goes

  • Paul Szymkowiak

    Brilliant – thanks Sam: worked for me too. I had actually been blaming my old monitor, so nice to have the problem solved :)

    I do have a related question if you have time to comment.

    I’m not sure how to apply the fix to other SVG files for bold and italic within the same font family. Do the font-weight and font-style statements need to be redeclared on the @font-face statement within the @media fix? Currently the following code with the fix applied at the end works for regular, but what is the correct approach for the bold and italic SVG’s?:

    (I’m attempting to group specific font files for regular, bold and italic under a single font family (as shown following))

    @font-face {
    font-family: ‘liberation-sans’;
    src: url(‘liberationsans-regular.eot’);
    src: url(‘liberationsans-regular.eot?#iefix’) format(‘embedded-opentype’),
    url(‘liberationsans-regular.woff’) format(‘woff’),
    url(‘liberationsans-regular.ttf’) format(‘truetype’),
    url(‘liberationsans-regular.svg#liberation_sansregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    font-variant:normal;
    }

    @font-face {
    font-family: ‘liberation-sans’;
    src: url(‘liberationsans-bold.eot’);
    src: url(‘liberationsans-bold.eot?#iefix’) format(‘embedded-opentype’),
    url(‘liberationsans-bold.woff’) format(‘woff’),
    url(‘liberationsans-bold.ttf’) format(‘truetype’),
    url(‘liberationsans-bold.svg#liberation_sansbold’) format(‘svg’);
    font-weight: bold;
    font-style: normal;
    font-variant:normal;
    }

    @font-face {
    font-family: ‘liberation-sans’;
    src: url(‘liberationsans-italic.eot’);
    src: url(‘liberationsans-italic.eot?#iefix’) format(‘embedded-opentype’),
    url(‘liberationsans-italic.woff’) format(‘woff’),
    url(‘liberationsans-italic.ttf’) format(‘truetype’),
    url(‘liberationsans-italic.svg#liberation_sansitalic’) format(‘svg’);
    font-weight: normal;
    font-style: italic;
    font-variant:normal;
    }

    @media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
    font-family: ‘liberation-sans’;
    src: url(‘liberationsans-regular.svg#liberation_sansregular’) format(‘svg’);
    }
    }

    • http://www.facebook.com/samuelgoddard Sam Goddard

      Hi Paul, glad it worked for you! With regards to the different weights / styles etc, I believe they need to be called as a completely separate file. The code you have posted is fine, however you just need to add the other 2 family calls into the media query at the end, I am currently on my phone so can’t post an example but I hope you get it sorted. If you look at the source code of the example with the fix in place it might make a bit more sense :)

  • http://twitter.com/jakiestfu Jacob Kelley

    Dope, thanks!

  • Giorgos Tsiou

    Excellent article! Worked perfectly, except from the case of the font being used inside native browser elements like select dropdowns. I assume this is something we have to live with or is there a solution for that as well?

    In any case you article has been a great help! Thank you!

    @kReEsTaL:disqus
    You should be able to define the font type sent for each rendering engine/browser by configuring your server. That should improve the performance.

    But I did not get your last point : If we must use a font that does not render properly in Windows 7 + chrome as woff, what other options we have other than using SVG?

  • griiettner

    Thanks my friend for this post… it just save me hours of troubleshuting…

  • http://const.fr/ Constantin Guay

    Hello Sam and thank you for this found !

    I encounter some problem with it on a website I work on :

    I use Google webfont service for Open Sans, and to fix the bold non-antiliased problem on Chrome, I used you way to fix it, including :

    @media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Bold */
    @font-face {
    font-family: ‘Open Sans’;
    src: url(‘fonts/OpenSans-Bold-webfont.svg#OpenSansBold’) format(‘svg’);
    font-weight: bold;
    font-weight: 700;
    font-style: normal;
    }

    /* Bold Italic */
    @font-face {
    font-family: ‘Open Sans’;
    src: url(‘fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic’) format(‘svg’);
    font-weight: bold;
    font-weight: 700;
    font-style: italic;
    }
    }

    Son only for Chrome and only for bold version of the font, I tell it to use the svg file from the local server. The thing is working, but then, something awkward happened :

    The special character “…” (ellipsis) is replaced by a reversed “^”.

    I would understand if it was on the bold text…svg may have not these character, but no. On bold, ellipsis are ok, the bug is only for the regular version and only if bold is set to svg. If I remove the call for svg, or on other browser, the bug disappear.

    For now, the only way to fix this I found is to force the local SVG version of Open Sans for Regular too.

    Any idea to be able to use only the svg for bold ?

    Thank you.

  • Jay Wolters

    Thanks for this solution – this was more than “a little annoying”. It also very important to remove the ID hash-tag form the SVG declaration.
    Example using FontAwesome:

    @media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face { font-family: ‘FontAwesome’; src: url(‘../fonts/fontawesome-webfont.svg’) format(‘svg’);}
    }

    • Brian Sharon

      +10,000 points for the tip on removing the hash. Thanks!

      • Sam Goddard

        +100,000 for the Neutral Milk Hotel avatar

  • Martin

    Super Awesome !!! You saved my life, thanks a lot.

  • Tim

    Thanks, Sam. Do you know of a solution to the problems this (using a SVG font-face) causes on Linux? All elements get borked. See http://49.156.19.216/grok-screenshot.png as an example of what happens to my website.

    • Sam Goddard

      Hey Tim. I think I remember another user in this thread having the same problem and it being directly related to SVG’s being utilized in input fields. I’m not 100% sure why but I always just fall back to a web-safe font or non SVG dependant font for inputs. Hope this helps! If you figure out a solution please let me know! Cheers

  • Johny

    thank you very much :) works perfect!

  • bobby Brown

    super ! after long time of trouble this made it work. thanks

  • Glen Elkins

    didn’t work for me, font still looks awful in chrome

    • Sam Goddard

      hi Glenn, can you post the domain you are experiencing the issue on?

      • Glen Elkins

        It seems fine now, to be honest i think it was my browser cache. Nice fix, was something that wound me up for a good amount of time, and having to explain to people that there wasn’t much i could do about how the browser rendered the font…not true anymore! cheers

        • Sam Goddard

          No worries! Can fully understand your pain with the browser cache! Glad you got it sorted! :)

  • JohnSReid

    Thanks for this article!

    I have been having a problem where Chrome has been rendering the font beyond the frame of the parent container. Using the Chrome-specific media query has it rendering properly now.

  • Prae

    This fixes it. Thank you!

  • Simon K.

    Thank you very much for that fix. It is working really perfect on my icon font which looked ugly without that fix on Chrome.

    But may I have another Question: Is it possible to use that fix with Google Fonts which are hosted on Google itself?

    • Sam Goddard

      Hi Simon, thanks for the comment! Unfortunately I do not believe the fix works with Google hosted fonts as they aren’t delivered with an SVG file. I could be proven wrong though as I don’t have much experience with Google Fonts. Let me know if you get it working! :)

  • Mansoor

    This is great:)

  • blade

    While this hack has valid uses, the live demo itself has one serious problem.

    There are only NORMAL weight fonts embedded, but all the text is rendered with BOLD weight (h1-h6 have font-weight: bold by default), that’s why it looks so crappy.

    If you add this to your css: h1, h2, h3, h4, h5, h6 { font-weight: normal; }, the fonts will looks very similar to the SVG demo! Of course, there will be a difference as non-svg fonts are rendered by OS, while SVG fonts are rendered by Chrome’s engine, but the point is, that you should have valid fonts first and only then consider doing browser-specific hacks.

    • Sam Goddard

      Hi Blade,

      Thanks for the comment! You make a valid point however psuedo bold / italics don’t actually work on font-face calls meaning it won’t make any difference at all if you put font-weight: normal or bold on an element that is calling font-face, the same goes for strong tags and font-style: italic.

      If you use font-face and want to bold a font you must call the bold version of the font as psuedo font weights will not work.

      Cheers! :)
      Sam

      • Sam Goddard

        hmm saying that I have just tried what you suggested and it has made a slight difference, I was under the impression that pseudo weights didn’t work on elements calling font-face, am I wrong?

  • nadangergeo

    What about “-webkit-font-smoothing: antialiased;”?

  • Blaskotron

    One+ year later, still borked.

  • http://ricardozea.me/ Ricardo Zea

    I was using icon fonts and they were displaying horribly ragged in Chrome (31.x at the moment of typing this message). I had decided to not use .SVG since I didn’t have any plan on supporting legacy iOS devices.

    Then I found this post and decided to try and include the .SVG font and voilá, icons looked perfect.

    I always thought Chrome used either .woff or .ttf fonts.

  • Ahmet Sali

    Hi Sam, it worked great for font icons on Chrome for me thanks for the tip!

  • Alicia

    Hi, I have this problem, and the fix didn’t work.

    I have a font-face just for media print, it’s not shown on media screen; when I tried to print the page, the custom font-family it’s not shown on Chrome preview print. But it works fine on Firefox and IE.

    I’ve tried your fix, but it doesn’t work. Do you have any other idea?

    Thanks

    • Alicia

      Hi again,

      more details:

      If I show something in the media screen with the font family I want to use on the print media. The print preview works fine. So, the problem seems to be, that it’s not loading the font for the print preview.

      screen stylesheet:

      @font-face {

      font-family: ‘myfont’;

      src: url(‘myfont.ttf’) format(‘truetype’),

      url(‘myfont.svg’) format(‘svg’);

      font-weight: normal;

      font-style: normal;

      }

      .impresion {

      display:none;

      }

      .printSection{

      font-family: ‘myfont’;

      }

      @media screen and (-webkit-min-device-pixel-ratio:0) {

      @font-face {

      font-family: ‘myfont’;

      src: url(‘myfont.svg’) format(‘svg’);

      }

      }

      print stylesheet:

      @font-face {

      font-family: ‘myfont’;

      src: url(‘myfont.ttf’) format(‘truetype’),

      url(‘myfont.svg’) format(‘svg’);

      font-weight: normal;

      font-style: normal;

      }

      .printSection{

      font-family: ‘myfont’;

      color:red;

      font-size:24px;

      }

      .contenedor {

      display:none;

      }

      html:

      This is the header

      Print section

      123

  • Marc Smith

    This is freaking fantastic! It totally worked.

  • UD

    this is a life saver, thanks a million

  • Ihor

    It’s great tutorial! Thank’s of lot Sam!

  • David Barrington

    Thank you for the very helpful post.

    I was able to successfully use this method with Google webfonts (or other similar services):

    1. Load google font

    2. Add override
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
    font-family: ‘Montserrat’;
    src: url(‘/assets/fonts/montserrat-regular-webfont.svg’) format(‘svg’);
    }
    }

    This appears to work well, but I’d like to know why this is bad. :)

  • Nathan

    Thankyou :D your fix works brilliantly, Thanks to Sam Goddard as well for the removing ID part

  • http://nicknoordijk.nl/ Nick Noordijk

    Finally, I was looking for this solution! Great work!

  • Stephan_M

    I works now. In the end it was a faulty .SVG file! re-generating the .svg on fontsquirrel did the trick. That, and the description above.

  • Nicolas Baudron

    Thanks a lot for this trick :) Work perfectly for me, but for me it was for Safari on xp !

  • Alvaro

    Thanks a lot… you gave the final trick and it worked properly in WordPress. I visited several forums and posts and none of them was proper for my site.

  • mroncetwice

    You, sir, are a life saver! I’ve never really looked deep into this issue, but have often had to hack around it in the past. Today I found myself facing it yet again and randomly plugged in a Google query on it.. This article came up in the first page of results ^_^

  • dota2stat

    This is great, thank you !

  • http://pctechntweaks.com/ M4Kamran

    You sir are awesome!

  • mask

    How can we do with google fonts? so far I havn’t found a good solution… :( chrome can not render google font properly, what a big joke… and it’s still no solution..?