Search code examples
htmlcssfontsgoogle-font-api

How do I convert Google fonts .ttf file to other file to types to support all the browsers


I am going to use 'Open Sans' font. I downloaded the pack from google fonts directory. It has only ttf format files. I want all the file formats(EOT, SVG, WOFF) to support all browser. How to do this.


Solution

  • Google does not provide the other formats but neither you need to convert them yourself. You can download all font formats including X-Browser-CSS at http://localfont.com/

    @font-face {
      font-family: 'Open Sans';
      font-weight: 400;
      font-style: normal;
      src: url('http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot');
      src: url('http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot?#iefix') format('embedded-opentype'),
           local('Open Sans'),
           local('Open-Sans-regular'),
           url('http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2') format('woff2'),
           url('http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff'),
           url('http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'),
           url('http://fonts.gstatic.com/l/font?kit=cJZKeOuBrn4kERxqtaUH3Zbd9NUM7myrQQz30yPaGQ4&skey=62c1cbfccc78b4b2&v=v13#OpenSans') format('svg');
    }