DEV Community

Cover image for Fix jagged fonts in Chrome/WebKit
Adam K Dean
Adam K Dean

Posted on

Fix jagged fonts in Chrome/WebKit

Just a quick post today, more of a reminder for myself than anything. The following is a great way to fix jagged fonts when using font kits with Chrome/WebKit based browsers.

The following is what you'd expect to see when defining a font face:

@font-face { font-family: 'FontName'; src: url('../fonts/FontName.eot'); src: url('../fonts/FontName.eot?#iefix') format('embedded-opentype'), url('../fonts/FontName.woff') format('woff'), url('../fonts/FontName.ttf') format('truetype'), url('../fonts/FontName.svg') format('svg'); font-weight: normal; font-style: normal; } 
Enter fullscreen mode Exit fullscreen mode

Well, apparently Chrome uses the SVG and does not like it coming last.

Append this to your CSS and you'll get much better results:

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

Without fix, and with the fix:

Fix jagged fonts in Chrome/WebKit

Top comments (0)