Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Fix shoddy font rendering on Chrome (Windows XP) adding SVG font #643

Closed
wants to merge 1 commit into from

4 participants

@vinzcelavi

I checked the Font Awesome on many browsers (with browserstack) and I discovered that Chrome 21+ on Windows XP had a very bad rendering because of the font interpretation of Windows itself.

The solution is to add a SVG version of the font to force Chrome to render font as SVG.
fontAwesome Chrome Windows XP

@Billiam

I believe svg was removed deliberately in v3, but not sure why.

Same issue exists in win 7 / chrome.

@vinzcelavi

SVG file size is almost 5x bigger than TTF, it is probably one of the reasons it was removed, but it's a pity because it works better in Chrome (Windows)...

I use my own web font without this issue.

@davegandy
Owner

SVG is not going back in. Rendering will be improved as a part of #611.

@davegandy davegandy closed this
@vinzcelavi

I know the "-webkit-font-smoothing" issue, but it doesn't fix the bad rendering in Chrome Windows.
This issue is due to Windows font interpretation, the -webkit-font-smoothing trick is relative to Chrome, not the OS.

@davegandy
Owner

I just tried this out using Browserstack (love that tool) with WinXP and Chrome 23. Renders the same as far as I can tell, with and without the SVG.

@vinzcelavi

I just tested. No doubt, there is a better render with SVG.
See the attachment, or try by your-self

http://www.celavi.fr/github/Font-Awesome/docs/

fontawesome-svg

@vinzcelavi
@Billiam

Renders the same as far as I can tell.

This is likely due to the font ordering, as well. Chrome needs the svg to appear before the woff/ttf.

Win7 / chrome 24:
fa

[edit] First pic with default CSS, second with SVG before ttf and woff.

@vinzcelavi
@borissamardzija borissamardzija referenced this pull request in fontello/fontello
Closed

Chrome/Win7 terrible rendering #117

@aendrew

I'm still experiencing this issue with the latest Font Awesome version (3.2.1).

To fix it, I added this right after the initial @font-face declaration:

@media all and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'FontAwesome';
    src: url('../font/fontawesome-webfont.svg#fontawesomeregular') format('svg'), url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
}

Two points:
1. SVG has to be first in the list (Or at least, not dead-last). This has already been noted.
2. Seems SVG doesn't like the "?v=3.2.1" bit in the URL's path (Or at least, on my web-server running Nginx).

@vinzcelavi

@aendrew Look promising. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.