HTML/CSS Webkit font render in webkit

Question

So now i am very frustrated. You surely know Google Chrome with his font-face render problems. So i am currently redesigning my website an also i added a modern looking font with @font-face but in webkit (safari and chrome) it just looks horrible. One letter looks very sharp the other one is blurred out and so on ... I've tried it wih the webkit antialising function in css but this doesn't seems to work. I've read that Google deactivated that. Anyway i also tried it with the tricks with text-shaddow and text-stroke it worked a little bit but doesn't look very good. I saw other websites with the same font and there it looked fantastic. So how did they managed it? Is there another possibility to solve this?

Thanks.

score 0 · Answer 1 · answered Dec 04 '13 at 20:35

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

Towards the bottom of this article, it suggests applying the CSS below to smooth transitions.

.cube {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
}

It forces the browser to use your GPU to render the CSS. A byproduct of this, for me, was smoother fonts -- consistent cross browser, and regardless of the transforms being applied. Maybe someone can chime in with why this worked!? Although I am not positive, I think it's likely this could help.

This is the site I tried it on, only built for Chrome right now; http://dev.sitesma.de/

The black boxes underneath the 4 gray bubbles have text that shows extremely sharp inconsistently depending on browser on transition without the above CSS applied.

score 0 · Answer 2 · answered Dec 05 '13 at 13:28

0

To avoid Chrome's font rendering problems, try this solution by Icomoon. It suggests loading the SVG font instead of the WOFF for Chrome. The SVG font will render properly on Chrome/Windows, and the only drawback is the bigger size of the SVG font file.

Load the font for Chrome only by adding this CSS:

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

answered Dec 05 '13 at 13:28

RoelN

2,181
13
15

Ok I tried it with the code from this [link](http://stackoverflow.com/questions/13674808/chrome-svg-font-rendering-breaks-layout/14345363#14345363) copy - paste changing the directory and the names but Chrome doesnt`t loads the .svg. In the resources from devloper tools I see the .svg file but it doesn´t use it. it uses the standard windows font. – Magnusmanu Dec 05 '13 at 17:44
The solution from that link is sound, so I expect something else is going wrong. Are you sure you're applying your CSS correctly? It's hard to tell without seeing some code. – RoelN Dec 05 '13 at 20:38
Oh sorry I forgot it. Here is the code in pastebin [link](http://pastebin.com/Aj7yxhyK) I also think so that something other is wrong. – Magnusmanu Dec 06 '13 at 15:48
So I figured it out now. I converted the fonts with fontsquirrel and now it works from beginning perfectly (now also without this shitty effect in chrome). I don´t know why and how but i guess there went something wrong with the conversion. Thanks for your help. – Magnusmanu Dec 06 '13 at 21:11

HTML/CSS Webkit font render in webkit

2 Answers2