Chrome mixes up SVG style text using web font (sometimes)

Question

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

If you test this demo on Chrome on Windows, it may look normal or not. By “OK,” I mean that this is unremarkable, just text. If this is not the case, then part of the text overwrites another text; This is pretty obvious.

If Chrome makes it look OK, try resizing the window several times. Oddly enough, when it starts to make mistakes, it is really difficult (perhaps impossible) for the browser to start showing it correctly again. (some of the people I work with saw the problem the same way I did, but subsequently their browsers started working, as in my case, perhaps very few of you will see this.)

Here's what it looks like when it is “out of order”:

(Font - Signika, this is a free font available from Google, FontSquirrel and Adobe. I host it on my own server because Google will not serve SVG, or if I don’t know how to do it. You won’t be able to see anything in Firefox because I do not serve the correct CORS header and Firefox is picky.)

I know how to fix this: show the WOFF file before the SVG file. I am currently using an SVG file because I have read over and over again on different blogs (and questions here) that Chrome does SVG better than WOFF. In this case, this obviously does not happen :-) Has anyone seen this and found another workaround?

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> 

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 problems with font and text. I also had this question, only mine deformed the text, and it was a paid font. Not sure why he does this, but in the end I tried a different font via google fonts and it worked on all 4 browsers.

Try to find a font on Google fonts that matches what you want, and use it instead. It is much easier to use, and you do not need to upload all these different formats to your server, it is simply extracted from the google website from the tag in the header. CSS is not needed.