FIXED! Font-Face Chrome Rendering

Sam Goddard

Senior Web Designer

For 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 jagged edges when viewed in Chrome

Posted 04/09/2012

157 Comments

In The Spirit Of The Games – The Olympic Brand

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://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://tdoyle.me/ Tom Doyle
    
    Hey Sam, I’m using the Ostrich Rounded font face ( http://www.theleagueofmoveabletype.com/ostrich-sans ) I’m going to attempt to use the fix that Zoltan posted under this comment and see if that does it, it seems like this typeface doesn’t come with an italic version though.
- Zoltan Hawryluk
  
  @Tom: Hmmm … is your use-case fixed by using this method?: http://www.useragentman.com/blog/2010/09/07/giving-challenged-font-face-fonts-the-italics-makeover/
  
  (Forgive the appearance of self-promotion of my own blog post, but it looks like it may be relevant)
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.
  - JAaronG
    
    Thanks for the reply Sam, we use Google Fonts, which for the fonts we selected (Open Sans, and Merriweather), supplied us with this to include into our code: https://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Merriweather:400,300,700
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
Zoltan Hawryluk

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

Interresting. This is obviously a bug in WebKit (Safari has the same behavior than Chrome) if the SVG font is declare after the Woff font, it should be load the Woff and not the SVG. Have you repport this bug (https://bugs.webkit.org/) to the WebKit team, I would love to follow it?
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.
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

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?
http://tdoyle.me/ Tom Doyle

I’ve tried the technique outlined here: http://www.useragentman.com/blog/2010/09/07/giving-challenged-font-face-fonts-the-italics-makeover/ And it seems to have given me smoother italicized text on my Windows Chrome VM, so this will probably be the only working solution at the moment.
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.
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

Hi Ronan, what font are you using and how are you calling it, can you link me to the site?
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

To fix when sometimes when using svg in chrome it breaks the layout when the page loads http://stackoverflow.com/questions/13674808/chrome-svg-font-rendering-breaks-layout

http://code.google.com/p/chromium/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20OS%20Area%20Feature%20Status%20Owner%20Summary&groupby=&sort=&id=95102
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!
Xavi Ivars

Awesome! Thanks a lot!

I can’t really understand how Chrome devs have not fixed the root cause of this problem yet

https://code.google.com/p/chromium/issues/detail?id=137692
http://code.google.com/p/chromium/issues/detail?id=95102
http://twitter.com/shabith shabith Ishan

Wow this helps a lot. thank you so much!
isaacalves

Great fix, it works! But what if I’m importing a font like this?

@import url(http://fonts.googleapis.com/css?family=Patua+One);

Thanks!
http://www.facebook.com/jozko.remen Jozko Remen

problem is, that this doesn’t work if you are using language with accented characters, like czech, slovak, polish, spain and so on. For accented characters, default font is used (ie. Helvetica/Arial for sans-serif) which looks very bad.

Example: http://reklamnyservis.sk/gryfnove/
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://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://twitter.com/unsalkorkmaz Unsal Korkmaz

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

Same question for me – what when embedding from google fonts?
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://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://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://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!! =)
Ünsal Korkmaz

no.. its working almost all browsers except ie and firefox.. http://caniuse.com/svg-fonts
An example site that live using this: http://unsalkorkmaz.com/
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
- Tom
  
  Hi I know you wrote this 10 months ago, but if you get a moment would you please mind explaining what removing the ID hash-tag from the SVG declaration actually does.
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
Jakub

Don’t use font-weight. Declare fonts and use instead font-weight: bold, font-family: YourFontBold.
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 😀 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..?
http://rysownik.com/ Tomasz Zych

Ok but this solution doesn’t handle clients OS detection. It should apply only on Windows platform.
CIWAN

Thank you, this worked for me.
Shane Permalloo

Superb post. It save my day, My website fonts was working great everywhere except on Webit on Android. Your code works perfectly well.
Thanks a lot…
http://wearemads.com/ Mohit Rajput

Awesome, Big Thanks.. That solved my render issue.
http://adstyl.es adstyles

I think the latest Chrome doesn’t need this specificity and will actually break font-face in Chrome. I just updated Chrome and font-face was broken. Removing this fix, actually fixed it!

Want to work with us?