26

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?

9point6
  • 976
  • 2
  • 10
  • 23

1 Answers1

18

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');
}
Julien Poulin
  • 12,737
  • 10
  • 51
  • 76
Gaffe
  • 402
  • 5
  • 12
  • 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... – Nicolas Le Thierry d'Ennequin May 17 '13 at 15:43
  • 10
    @GlauberRocha You can use the [Webfont Generator](http://www.fontsquirrel.com/tools/webfont-generator) from Font Squirrel to create a font-face kit from TTF files. – Gaffe May 17 '13 at 18:32
  • Thanks a lot, @Gaffe. Strange though because I seem to remember the Google Fonts website used to offer all those formats directly on download. – Nicolas Le Thierry d'Ennequin May 23 '13 at 09:47
  • 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: https://github.com/majodev/google-webfonts-helper/ – Knak Jan 21 '16 at 17:47