Workaround for Pesky Google Font Rendering

This is John.

I was working on a project where we ran into a problem right before launch. The Google Fonts we had were rendering pixalated on Windows Chrome and Firefox. This seems to be a huge problem in general with less then stellar hacks (moving SVG calls around, some other tag calls, etc.) and the infamous Google "We are working with it" response.

John doesn't have time for that, only winning is allowed for this kalabot.

I stumbled across this website: http://cssmediaqueries.com/overview.html

It is actually pretty cool. It shows you all the @media queries your current session has for that device and browser.

I noticed that @media screen and (-webkit-min-device-pixel-ratio: #) was different for iOS, chrome, etc on my Windows, Linux, iPhone, all my fun devices.

John's brain churns...

I read a lot about woff, svg, eot, ttf files and I found a few websites that said what font types were supported where. EUREKA, why not just call the font formats specifically with an @media query? I downloaded and converted the fonts using some online converters (not the best performance based idea, but it was needed).

After a few test runs, I came up with this:

@mixin font-face ($font-name: false) {
@if $font-name {

/** iOS **/
@media screen and (-webkit-min-device-pixel-ratio:1.3) {
$font-url: "../fonts/" + $font-name;
@font-face {
font-family: $font-name;
src: url($font-url + '.svg' + $font-name) format('svg');
font-weight: normal;
font-style: normal;
}
}

/** ie & firefox **/
@media screen and (-webkit-min-device-pixel-ratio:1.5) {
$font-url: "../fonts/" + $font-name;
@font-face {
font-family: $font-name;
src: url($font-url + '.eot');
src: url($font-url + '.eot?#iefix') format('embedded-opentype'),
url($font-url + '.woff') format('woff');
font-weight: normal;
font-style: normal;
}
}

/** chrome & droid **/
@media screen and (-webkit-min-device-pixel-ratio:1.0) {
$font-url: "../fonts/" + $font-name;
@font-face {
font-family: $font-name;
src: url($font-url + '.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
}

/** OS X Safari **/
@media screen and (-webkit-min-device-pixel-ratio:0) {
$font-url: "../fonts/" + $font-name;
@font-face {
font-family: $font-name;
src: url($font-url + '.svg' + $font-name) format('svg');
font-weight: normal;
font-style: normal;
}
}
}
}

Granted, I am using mixin with SaSS but you can apply this logix with any normal CSS. Just load the CSS font-face call into each @media query above and it should work!

Yes, this is a workaround for now. As browsers update, this will become passé. However, the media calls I am using seem to go back a few browser versions on the ones I checked.

OK, that is all.

Ninja vanish, John out.

*POOF*