My favorites | Sign in
Project Home Downloads Wiki Issues Code Search
New issue   Search
  Advanced search   Search tips   Subscriptions
Issue 95102: SVG @font-face rendering issue
48 people starred this issue and may be notified of changes. Back to list
Reported by, Sep 1, 2011
Chrome Version       : 13.0.782.218
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
URLs (if applicable) :
Other browsers tested:
Add OK or FAIL after other browsers where you have tested this issue:
     Safari 5: OK
  Firefox 6.x: OK
     IE 7/8/9: OK
     Opera   : OK

What steps will reproduce the problem?
1. use @font-face width svg fonts, for example:
@font-face {
    font-family: 'Champagne';
    src: url('champagnelimousines-webfont.eot');
    src: local('☺'),
    url('champagnelimousines-webfont.svg#ChampagneLimousinesRegular') format('svg');
2. Open Google Chrome
3. And now the hardest part: try to reproduce the problem. It only happens sometimes. Sometimes it looks OK, like in other browsers, and sometimes it look like this:
Just try to refresh page until it happens. 

What is the expected result?

What happens instead?

UserAgentString: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.218 Safari/535.1

Sep 1, 2011
lol, there is no way to edit posts? there should be "1. use @font-face with svg..." not "1. use @font-face width svg..."
Sep 1, 2011
(No comment was entered for this change.)
Labels: -Area-Undefined Area-WebKit WebKit-WebFonts WebKit-SVG
Sep 2, 2011
any chane you know anything about this yuzo?
Status: Assigned
Sep 4, 2011
(No comment was entered for this change.)
Sep 5, 2011
Can you upload an HTML file (and an SVG font file) that exhibits the issue?
(Or at least a URL?)

That would greatly help reproducing the issue.
Sep 5, 2011
but you have to be patient, it only happens sometimes.
it has been tested on few PCs (and one virtualbox xp) with the same result.

Sep 5, 2011
Thank you for the information.

Unfortunately, I cannot reproduce the issue after trying loading the pages more than 30 times with Chrome 15.0.871.1 canary on Windows Vista 64.

It would be great if:
1. You could check if the canary build of Chrome still has the issue.
2. You could find an example that exhibits the issue more often.
Sep 5, 2011
1. i'll try,
2. it doesn't depend on example. sometimes it happens, sometimes not. just try on another PC. But i've found something that might be helpful. When that bug apears on one site it apears on another. for example: if it happens on, then is affected as well.
Sep 5, 2011
Hi, thank you for the response.

I'm interested in the result of 1.

According to 2, it seems more like a caching/network issue than font/layout.
Are the fonts and files served by the same physical machine? Possibilities are:

A. The server (or its proxy) is serving broken file(s) sometimes.
B. Chrome sometimes caches broken file(s) or corrupts cached files.
C. Chrome/WebKit has rendering bug, probably file load timing related.
D. Something else.

If the server is the same, A looks more likely. If they are different, B looks more likely.
C looks less likely than A or B.
Sep 6, 2011
1. I can't reproduce on Canary, but it's so random bug i'm not sure is it fixed or just bad (or good;0) luck.
2. yes they are server by the same machine: a) dropbox, b) my localhost apache, c) my private server, d) another private server
It may by connected with caching, because this looks to apear more often if i make some insignificant changes (not related with fonts, layout) in html/css, and reload that bugy website.
Sep 6, 2011
1. so canary build of chrome still has the issue.
80.6 KB   View   Download
Nov 29, 2011
Please re-open this bug if it reproduces.
Status: WontFix
Apr 24, 2012
This is a random bug I have seen as well in all my svg-font projects so far (and some clients complain for it, I tell them "please reproduce" already knowing they won't be able to). You can reproduce it only the 1st time, then after a couple of F5 refreshes, it gets it right and you never get to reproduce it again. Clearing browser cache doesn't work either.
May 30, 2012
I'm having to use SVG fonts as Web Font rendering in Chrome looks awful (still). Attached is a screenshot of the bug. You can see that search count number is being given the wrong width.

It's an intermittent bug and impossible to reproduce reliably.

User agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.52 Safari/536.5

Site is (unless I switch back to WebFonts in the meantime).
Svg Font Rendering.png
74.2 KB   View   Download
Jun 14, 2012
This is still a bug in Chrome 19. We tried implementing an SVG font because it rendered much better in windows than woff/ttf. Then we got random reports with this exact issue. Only happens in Windows.
Jun 14, 2012
I've been tried to reproduce these days, but I coudn't reproduce it on
Narkeeso, do you have another instance?

Status: Unconfirmed
Jun 14, 2012
@16 That site uses .woff, so the issue won't pop up for that site.
Jun 15, 2012
We had to disable SVG fonts on because of this issue, so you'll no longer see it on live now.

Problem is, it was totally transient, I'd sometimes go a week without seeing it, then it's consistently there for a week. I couldn't find any way to reproduce it reliably.

If someone wants to try and recreate it, you need to have one span with some SVG text in it (maybe styled in a bigger font size) then some more SVG text, all in a div:

<span>Some big text</span>
More text

It seems like the font rendering engine miscalculates the width of the span (sometimes) and the problem occurs as the 'More text' gets rendered over the 'Some big text'.

Luckily I took the screenshot above. It is a bug that remains.

The real fix for this however is to make woff fonts look as nice in Chrome (Windows) as they do in Firefox and IE9+ by using DirectWrite rendering. (Easier said than done, I'm sure).
Aug 7, 2012
Still happens

Google Chrome 21.0.1180.60 m

(should merge with above)
Oct 5, 2012
The problem still occurs in Chrome 22.0.1229.79.

It forces us to use something other than SVG.
Oct 5, 2012
(No comment was entered for this change.)
9.0 KB   View   Download
Oct 5, 2012
 Issue 123251  has been merged into this issue.
Oct 5, 2012
(No comment was entered for this change.)
Status: Available
Oct 8, 2012
(No comment was entered for this change.)
Status: Assigned
Oct 19, 2012
I am interested in whether or not this problem has resolved itself after some font work done for the Version 24 Canary.

Please comment if you are still seeing the problem with a version later than 24.0.1287.0.
Oct 25, 2012
It seems that the problem was solved in Chrome 24 Dev. I lost a lot of time trying to fix it himself... Ehh. Screens from Chrome 22 Stable.
17.7 KB   View   Download
13.1 KB   View   Download
Dec 11, 2012
We just launched a new redesign and switched back to SVG fonts. A few users using Chrome 24 beta on windows are reporting that the issue still exists. What's the hold up on this bug? SVG is the only font format that renders consistently across all browsers.
Dec 12, 2012
Narkeeso, can you attach any screenshots of this situation repro'd in 24 beta or, even better, 25 canary?
Dec 28, 2012
I can confirm that this bug is fixed in 25.0.1364.5 dev-m on Windows.
Jan 11, 2013
Also having the exact same issue in Chrome & Chrome Canary, I recently wrote a blog article about prioritizing .SVG fonts for smoother rendering in Windows, however am now wondering if it's the best idea?

Would love to figure this out, we are having many issues with client websites regarding this issue 
Jan 11, 2013
So you sayin in 25.0.1364.5 this fix still exists?
Jan 11, 2013
had reports from colleagues of the issue persisting in Chrome Canary latest build however I think they may have been wrong, 24.0.1312.52 was released today (if i'm correct?) for standard Chrome, which appears to have corrected it, I haven't seent he issue at all this morning, however, having the same issue as everyone else trying to forcefully reproduce the error!
Jan 11, 2013
Bug still present in Chrome Canary 26.0.1380.0, Windows 7 x86 & x64. Website with SVG @font-face priority (to have the fonts anti-alliased). Especially A HREFs get incorrect inline width.
affected CSS:
5.3 KB   View   Download
Jan 14, 2013
Some examples of the issue, we've had to drop .svg prioritizing across all our sites :(
41.4 KB   View   Download
39.7 KB   View   Download
Jan 15, 2013
I also have this issue its very annoying why isn't there a fix yet? SVG type fonts are definitely prettier then the ugly rendering chrome does to the others.

Version 24.0.1312.52 m
Jan 15, 2013
Just tried the dev version of Google Chrome for Windows 7 (25.0.1364.29 dev-m) and the issue seems to be fixed! Hope it makes it into the next official update. 

Anyone else notice the issue's fixed in 25.0.1364.29 dev-m?
Jan 16, 2013
26.0.1384.2 dev-m, buggy.
18.2 KB   View   Download
Jan 19, 2013
There has been a sort of fix posted on StackOverflow:

Working for me so far!
Jan 21, 2013
absolute legend!! working for me so far! if anyone tries this fix and it's still broken can you update us on here, would love to stick this fix in our web template but still cautious at the mo! :)
Jan 23, 2013
#41 beaver82
Yes the toddis css solution works.
Anyway the bug occurs when you have svg font-face 1st (so it gets choose) and only when you close the browser, reopen and navigate to the site, refreshing the page makes the bug go away.
Feb 21, 2013
The CSS "solution" isn't a solution to this bug. All that that change (the change in the Stackoverflow answer) does is avoid the SVG bug by using WOFF instead.  We use SVG instead of WOFF for a reason (or a well-entrenched superstition, at least), so that's definitely not a "fix" for the problem.

Feb 21, 2013
Using that media query solution, both the WOFF and the SVG fonts will be loaded, which means two HTTP requests and extra download time and slower loading of the font.
Feb 22, 2013
Here is a JSBin: - there's nothing about that markup that appears to really matter; it's just what I happened to be working with from a real site at the moment I first got my browser to fail.

Now that won't always fail - it seems to be a life-cycle thing with the browser instance, or something.  If it doesn't fail, try a freshly-started browser instance. If it does fail, then the problem can (sometimes? always?) be fixed by simply adjusting the window size, more or less randomly.

Once a browser instance stops showing the text incorrectly, then (in my experience) it continues to work properly and cannot be made to fail again.
Feb 22, 2013
Apologies: I'm seeing the failure in Chrome Version 24.0.1312.57 m, Windows 7
Mar 10, 2013
(No comment was entered for this change.)
Labels: -Area-WebKit -WebKit-WebFonts -WebKit-SVG Cr-Content Cr-Content-WebFonts Cr-Content-SVG
Mar 16, 2013
Same in Chrome 25... and waiting...

Mar 17, 2013
I would add that on Linux this error doesn't appear in any version of Chrome (stable, beta, dev or canary). I'm using dev channel mainly. So maybe it's Windows problem?
Mar 18, 2013
@bartek12 it is definitely a Chrome-on-Windows problem.
Apr 5, 2013
(No comment was entered for this change.)
Labels: -Cr-Content Cr-Blink
Apr 5, 2013
(No comment was entered for this change.)
Labels: -Cr-Content-SVG Cr-Blink-SVG
Apr 5, 2013
(No comment was entered for this change.)
Labels: -Cr-Content-WebFonts Cr-Blink-WebFonts
Apr 17, 2013
Absolutely ridiculous that this bug still exists. I can confirm from a client that this bug still exists in v26.0.1410.64 m. See attached image.
Weergave DeFusie in Chrome.jpg
168 KB   View   Download
Apr 18, 2013
Stephen, could you look at this one? This bug has been around for a while and seems to still be biting people.
May 3, 2013
Bug still here... Version 27.0.1453.73 beta-m 
Aug 10, 2013
For the love of god... What can I do to help? It has been 3 years since this bug was filed and it is still happening on v28. Font rendering is a mess on windows and we web developers need a break. The one thing that has a chance of displaying smooth fonts on windows is unusable because glyphs overlap for no reason.
Sep 5, 2013
#57 jerzyglowacki
This bug still appears in Chrome 29.0.1547.66 in Windows 7, when using SVG webfont the element is much shorter than should be, even after multiple reloads.
What's interesting, the problem is gone when the setting chrome://flags/#ignore-gpu-blacklist is OFF.
1.1 KB   View   Download
Sep 6, 2013
(No comment was entered for this change.)
Labels: Cr-Blink-Fonts
Sep 12, 2013
This is still happening!! Ahhhhhh. We use SVG fonts on chrome to get around the absolutely shoddy rendering on Windows of @font-face.

Please give us an update!!

 is another example of our site

360 KB   View   Download
Sep 20, 2013
Still happening on Chrome 29, see attachment. For me the issue pops up more often than not. Using Windows 8 + Chrome 29. Maybe it has something to do with the quality of the font. I use DejaVuSans Extra Light downloaded on this site:

I've put it through Font Squirrel's @font-face generator and moved the SVG to the top so Chrome doesn't try to fetch and render the woff (because of rendering issues as stated multiple times in this thread).
3.4 KB   View   Download
Nov 16, 2013
Still happening on Chrome 31 on Windows 8.

Screen Shot 2013-11-17 at 10.12.45 .png
100 KB   View   Download
Nov 27, 2013
The issue still exist. Though its difficult to catch, but once the rendering goes weird it then happens multiple times. Sometimes restart of browser works and sometimes it doesn't. Just for testing check - attaching zipped folder having all testing related html/css/font. Just for the information - font which I am using is Lato provided by Flat UI (designmodo).

Version checked in : 31.0.1650.57 m (win 8)

I did check in canary ver :  33.0.1720.0 canary and its seems to be OK. (I mean could not found after trying all weird things.)

I guess this bug needs to be taken into priority as chrome's font-rendering on windows is not smooth w/o svg font.

2.3 MB   Download
85.3 KB   View   Download
Dec 17, 2013
I can confirm this issue sill exists in Chrome 31.0.1650.63 m (Stable) on Windows 7.

I wouldn't mind falling back to a different font format, but SVG seems to be the only one with decent rendering on Windows. Everything else looks terrible.

Removing the SVG @font-face declaration from the CSS, refreshing the page, then putting the SVG declaration back in seems to kick it back to rights, but this obviously isn't a real-world solution for a production site.

The SVG I'm using is made via a custom font I made with Font Creator 6.5 then converted with Font Squirrel's Webfont Generator (on the 'optimal' setting). An earlier poster mentioned Font Squirrel too. Wondering if there could be something specific in the Font Squirrel generated SVG that causes the issue.

If not, is there a reason why this bug hasn't been rectified after over two years?
Dec 17, 2013
Historically we have never been able to reproduce this issue, for whatever reason.

More recently, Windows font rendering in general is very close to being fixed in Chrome. And SVG 2.0 is removing font support (SVG fonts will be supported in OpenType). For those reasons we have not fixed this issue.

Jan 28, 2014
I have been having this problem frequently on multiple projects.

Sometimes the web font will render properly towards the top of the page, and break at the bottom. A refresh fixes it.

I've also noticed that it happens if I leave a tab open, do something, and then return to it. I'm using Chrome 32.0.1700.77 on Mac OS 10.8.5
Sign in to add a comment

Powered by Google Project Hosting