Chrome jumbles text styled with a web font in SVG

Question

Demo: http://jsbin.com/onixik/2 (contents are below)

If you check that demo in Chrome on Windows, it may look OK or it may not. By "OK" I mean that it's unremarkable, just some text. If it's not OK, then part of the text overwrite other text; it's pretty obvious.

If Chrome is making it look OK, then try resizing the window randomly a few times. Oddly, once it starts being wrong, it's really hard (maybe impossible) to get the browser to start showing it properly again. (edit — some people I work with saw the problem just like I did, but their browsers subsequently started working, like mine eventually did; perhaps very few of you will see it.)

Here's what it looks like when it's "not OK":

(The font is Signika; it's a free font available from Google, FontSquirrel, and Adobe. I'm hosting it on my own server because Google won't serve SVG, or if it will I don't know how to make it. You won't be able to see anything in Firefox because I'm not serving the right CORS header and Firefox is picky.)

I know how to fix this: serve the WOFF file before the SVG file. I'm currently serving the SVG file first, however, because I've read over and over again on various blogs (and questions here) that Chrome renders SVG better than WOFF. In this case, that's clearly not happening :-) Has anybody seen this and found another workaround?

The HTML:

  <div style='position: relative'>
    <div class=wf style='font-size: 135%'>
      Hello This is a test of some formatting issues
      <span style='margin-top: -3px; font-size: 120%'>*</span>
      The problem is strange.
    </div>
  </div>

The CSS:

  @font-face {
    font-family: 'Signika';
    src: url('http://gutfullofbeer.net/fonts/Signika-Semibold-webfont.eot#') format('embedded opentype'),
      url('http://gutfullofbeer.net/fonts/Signika-Semibold-webfont.svg') format('svg'),
      url('http://gutfullofbeer.net/fonts/Signika-Semibold-webfont.woff') format('woff'),
      url('http://gutfullofbeer.net/fonts/Signika-Semibold-webfont.ttf') format('truetype');
  }

.wf {
  font-family: "Signika";
  font-weight: normal;
  padding: 2em;
  max-width: 12em;
}

Answer 1

Chrome seems to have issues with font and text. I also had that issue, only mine was warping the text and it was a paid font. Not sure why it does this, but I ended up trying a different font through google-fonts and it worked on all 4 browsers.

Try finding a font on google fonts that matches what you want and use it instead. It's much easier to use and you don't have to load all those different formats into your server, it just draws from the google site from a tag in the header. No CSS needed.