Prioritise SVG font with Google Web Fonts

问题:

font-face rendering in Google Chrome on windows is awful unless you use an SVG font. However google web fonts prioritises WOFF files.

Is there any way to force it to deliver the SVG fonts or do I have to manually host the fonts myself?

回答1:

You'll need to host the files as using the @import or <link> methods reference a CSS file that only calls the WOFF file (because of browser detection). Ex. http://fonts.googleapis.com/css?family=Open+Sans:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url('http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}

Once you host the file locally, you can then move the SVG call up in the stack to prioritize it. You can see an example here: http://www.fontspring.com/blog/smoother-web-font-rendering-chrome

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); 
  src: url('webfont.eot?#iefix') format('embedded-opentype'),
  url('webfont.svg#svgFontName') format('svg'),
  url('webfont.woff') format('woff'),
  url('webfont.ttf')  format('truetype');
}