fonts.googleapis is showing different CSS files based on the browser type

Question

insdie my CSS files i am referencing fonts suc as :-

http://fonts.googleapis.com/css?family=Droid+Sans:regular&subset=latin 

But now i need to download these CSS and add them to my host, instead of downloading them from google. but the problem i am facing is that when i try to download the related CSS files by access the above link from my IE it downlaod the following :-

@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/droidsans/v4/s-BiyweUPV0v-yRb-cjciFQlYEbsez9cZjKsNMjLOwM.eot);
  src: local('Droid Sans'), local('DroidSans'), url(http://themes.googleusercontent.com/static/fonts/droidsans/v4/s-BiyweUPV0v-yRb-cjciFQlYEbsez9cZjKsNMjLOwM.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/droidsans/v4/s-BiyweUPV0v-yRb-cjciBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}

While on firefox it shows the following :-

@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Droid Sans'), local('DroidSans'), url(http://themes.googleusercontent.com/static/fonts/droidsans/v4/s-BiyweUPV0v-yRb-cjciBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}

So i got lost on which url() i should download ? the woff or the tff ?? or both ?

EDIT

I have replaced this

@import url(https://fonts.googleapis.com/css?family=Karla|Ubuntu);

with

/*@import url(https://fonts.googleapis.com/css?family=Karla|Ubuntu);*/

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  src: url('~/Content/fonts/8gO-GQO6h3meAtqRrd890A.eot');
  src: local('Karla'), local('Karla-Regular'), url('~/Content/fonts/8gO-GQO6h3meAtqRrd890A.eot') format('embedded-opentype'), url('~/Content/fonts/azR40LUJrT4HaWK28zHmVA.woff') format('woff');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('~/Content/fonts/_tMhxyW6i8lbI7YsUdFlGA.eot');
  src: local('Ubuntu'), url('~/Content/fonts/_tMhxyW6i8lbI7YsUdFlGA.eot') format('embedded-opentype'), url('~/Content/fonts/_xyN3apAT_yRRDeqB3sPRg.woff') format('woff');
}

But the fonts effect did not work ? although when using the @import i can see the fonts effect, while when i reference them locally they stopped working. Thanks

Answer 1

If you do need to use the fonts locally (rather than linking to Google's hosted versions), then they provide a download link on each font's page (in the top right) ¹ .

The download link offers the option to 'Download the font families in your Collection as a .zip file'. If you do that, you'll get all the different versions (.ttf/.eot etc) that are needed for cross-browser @font-face support ² .

1. You should have a good reason for doing so however: linking to the hosted version is simpler, and you'll automatically be using the latest version of each font.

2. Different browsers require different formats (the multiple src 's in your CSS). Again though, if you're not familiar with what's required just stick with linking to Google's hosted files.