Google Font API uses browser detection. How to get all font variations for font-face

I just discovered that Google Font API uses browser detection

This means that when you open http://fonts.googleapis.com/css?family=Racing+Sans+One it will show the content needed only for your current browser

So I can't just grab that and use in my own font-face, if I want it to work in all browsers. Many people do this, not knowing it then won't work everywhere

What would be the method to get all variations of the font? woff2/woff/ttf/etc.? (to use as fallbacks in font-face)

I just tried opening that api page in Chrome, changing browser useragent spoofing in Developer, and go through the variations. I see at least 4

Is woff2/woff/ttf enough, or how many versions do I need to be safe? Do I need EOT/SVG version too?

Solution

Try downloading atleast these variations of the webfonts : eot , woff , ttf , svg and then you can use them like this for maximum cross browser benefits :

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

See this answer for more information: Link