Fix jagged fonts in Chrome/WebKit

#webkit #chrome #css

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;
}

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');
  }
}

Without fix, and with the fix:

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.