Prioritise SVG font with Google Web Fonts

Question

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?

Epicontinental

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

Townsfolk

Thanks for posting this but on the Google Fonts pages I can't find how to download the fonts in the various formats. I've made a collection with Open Sans 400, 400 italic, 600, 600 italic. When I download the collection as a zip file, there are only TTF files... – Attendance

@GlauberRocha You can use the Webfont Generator from Font Squirrel to create a font-face kit from TTF files. – Townsfolk

Thanks a lot, @Gaffe. Strange though because I seem to remember the Google Fonts website used to offer all those formats directly on download. – Attendance

I know this is is quite old but I just came accross a very useful and well-made tool enabling, among other things, easy use and download of google fonts with other files than 'woff'. See here: github.com/majodev/google-webfonts-helper – Bissell