Skip to content

Loading…

Improve font-face rendering for Chrome on Windows #215

Closed
wants to merge 1 commit into from

2 participants

@reed

A thorough explanation of the problem and the fix can be found here: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

I'd understand if you don't want to add this to your library since it's a hack. But it works great in my projects, so I thought I'd suggest it.

@plapier

Thanks @reed for the PR. Can you comment on the support of this? Which browsers and versions does this work on? Which versions of windows does this work on?

The blog post was a bit vague on the support details.

Not sure if it will make it in. More research may be required.

@reed

My understanding is that it targets all webkit browsers (Chrome, Safari). I'll do a bit more research and get back to you.

@reed

It's difficult to find reliable support documentation for something like this. Specifically, the answer to whether or not there are any drawbacks to using SVG fonts in these browsers is unclear.

One downside to this method that I have seen is that the browser will download the WOFF font file in addition to the SVG file. This behavior is likely a bug in Chrome, but it's potential effect on a site's performance makes it worth mentioning.

This fix works on every system and webkit browser that I have available to me (W7/OSX/iOS, Chrome/Safari) to the degree that I'm comfortable using it, but the more I think about it, the more I think that it doesn't really fit in with what Bourbon is for. So I'll go ahead and close this myself. If you disagree with that sentiment, you're more than welcome to reopen this.

@reed reed closed this
@plapier

Thanks @reed. I agree with you on this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 25, 2013
  1. @reed
Showing with 14 additions and 0 deletions.
  1. +14 −0 app/assets/stylesheets/css3/_font-face.scss
View
14 app/assets/stylesheets/css3/_font-face.scss
@@ -20,4 +20,18 @@
url('#{$file-path}.svg##{$font-family}') format('svg');
}
}
+
+ @media screen and (-webkit-min-device-pixel-ratio: 0) {
+ @font-face {
+ font-family: $font-family;
+ font-weight: $weight;
+ font-style: $style;
+
+ @if $asset-pipeline == true {
+ src: font-url('#{$file-path}.svg') format('svg');
+ } @else {
+ src: url('#{$file-path}.svg') format('svg');
+ }
+ }
+ }
}
Something went wrong with that request. Please try again.