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 :

enter image description here

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 ?

You can use fontsquirrel.com to generate the fonts. The service is straight-forward and genuine. — Sarvap Praharanayuthan
– Sarvap Praharanayuthan, Commented Apr 8, 2014 at 7:06
You can upload your fonts in this page fontsquirrel.com/tools/webfont-generator and generate all the possible formats :) — Sarvap Praharanayuthan
– Sarvap Praharanayuthan, Commented Apr 8, 2014 at 7:11
you should be able to include them from google directly like this @import url(http://fonts.googleapis.com/css?family=Roboto); they claim to support IE6+ — paulitto
– paulitto, Commented Apr 8, 2014 at 7:13

Jared Michael Czerew · Accepted Answer · 2014-04-22 21:12:47Z

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

answered Apr 22, 2014 at 21:12

Jared Michael Czerew

1621 gold badge2 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

LeaveAirykson · Accepted Answer · 2014-04-18 07:24:54Z

1

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

edited Apr 18, 2014 at 7:24

answered Apr 18, 2014 at 7:18

LeaveAirykson

1319 bronze badges

5 Comments

WASasquatch Over a year ago

This is masterful. :P Funny thing is, I didn't realize that about EOT so I was overlooking it while trying to discover a method for him.

LeaveAirykson Over a year ago

you don't need to do this for all browser versions. you already have the ttf files. ttf is supported in all browser except ie (overview: caniuse.com/ttf) for ie you can get the eot file by changing your user agent to any ie version. OR if you work under windows, you can just visit the link via ie and get the eot file.

Royi Namir Over a year ago

What about svg ? And ttf ?

LeaveAirykson Over a year ago

you don't need svg if you have the ttf files. and as you said, you already have them, don't you? just download the eot files like i explained and you are ready to go.

nwalton Over a year ago

@LeaveAirykson - SVG is for older IOS browsers, so you do need it if you want to support those. WOFF is the emerging standard, so it may be a good idea to include that as well, to be forward-compatible. A browser will only ever download one of the formats, so it's no big deal to have them all on your server.

Web Cruzaders · Accepted Answer · 2014-04-22 07:04:18Z

1

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.

answered Apr 22, 2014 at 7:04

Web Cruzaders

411 silver badge7 bronze badges

Comments

yunzen · Accepted Answer · 2014-04-23 10:32:14Z

0

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

answered Apr 23, 2014 at 10:32

yunzen

33.5k13 gold badges79 silver badges114 bronze badges

Comments

Gal Samuel · Accepted Answer · 2014-04-23 10:59:34Z

0

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

edited Apr 23, 2014 at 10:59

answered Apr 23, 2014 at 10:52

Gal Samuel

4932 silver badges12 bronze badges

Comments

Anup Karanjkar · Accepted Answer · 2014-04-08 07:36:19Z

-1

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....

answered Apr 8, 2014 at 7:36

Anup Karanjkar

919 bronze badges

2 Comments

Jukka K. Korpela Over a year ago

FontSquirrel is mentioned most often in contexts like this, but it handles each typeface as a font family, making HML and CSS coding less convenient and less natural. Besides, the question is about getting “the most trusted/official formats”.

Mr. Alien Over a year ago

@JukkaK.Korpela You can rename each with the same font family with custom style and font weight... Font Squirrel is the best option here...

Collectives™ on Stack Overflow

Using CSS with google font - all formats?

6 Answers 6

Comments

5 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

5 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related