Using CSS with google font - all formats?

Question

I'm using Google's font : Roboto

When I download the zip file ( in order to use it localy) - I get this zip file :

But in order to use this font with older browsers I need this format :

@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 */
}

But as You can see - I don't have the eot , woff , svg formats.

There are online tools but they yield different results.

Question:

How/Where can I get the most trusted/official formats for my google font ?

Answer 1

Option One: http://everythingfonts.com/font-face - Use this to upload your file and it will convert to cross browser @font-face.

Option Two:

First Step -> https://www.google.com/fonts/specimen/Roboto

Second Step -> Open Roboto in Google Fonts (top right corner link)

Third Step -> Choose the way you'd like to call the font for your body (follow the steps) - Standard - @import - Javascript

Answer 2

Just three days ago i had the same problem. i solved it like this:

WOFF is supported in FF 3.6+, Chrome 5.0+, Safari 5.1+, IE 9+ so your modern browsers are covered. as seen on caniuse.com

as far as older browsers (< IE 9) you just need the eot file. you get it by opening the google font css file in a browser in which you can change the useragent. If you change the useragent to ie 7 for example, the stylesheet will include the link to the eot file.

for example if you open this link with useragent ie 7 in chrome: Roboto Google Font css file

it will output this:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/roboto/v10/5YB-ifwqHP20Yn46l_BDhA.eot);
  src: local('Roboto Regular'), local('Roboto-Regular'), url(http://themes.googleusercontent.com/static/fonts/roboto/v10/5YB-ifwqHP20Yn46l_BDhA.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/roboto/v10/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
}

so just grab the eot file url from the src: http://themes.googleusercontent.com/static/fonts/roboto/v10/5YB-ifwqHP20Yn46l_BDhA.eot

Answer 3

Goto http://www.fontsquirrel.com/tools/webfont-generator

Upload your font file(.ttf) > Choose Expert > Click Agreement > Download Your Kit.

This will create all formats of your uploaded file with font face CSS as a .zip file. Just extract and use the fonts/CSS to yours.

Answer 4

Google says when you download the zip:

You do not need to download the font to use it on your webpages. Instead, refer to the "Use" section.

https://www.google.com/fonts#UsePlace:use/Collection:Roboto:400,400italic,700,700italic

Answer 5

From google: https://www.google.com/fonts#UsePlace:use/Collection:Roboto

Standard inclusion for HTML:

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

Integrate in your CSS:

font-family: 'Roboto', 'sans-serif';

BTW, you may use http://www.fonts.com/web-fonts/google for syncing your desktop with Google Fonts

Answer 6

This is nice trick I dont know it helpful or not for you, But I always do this thing to my projects.. Just go

Click here

& upload your fonts on this website & click on convert button this website gives you eot, svg, woff files automatically & this site also gives u css code u just copy & paste that code in your css file & copy all those file in css folder... Enjoy....