Using Google Web Fonts with SASS/Compass -- how?

Question

Say I have this font: Open Sans

If I want to use this with a SASS/Compass project, is there a better way to do it then linking to an additional stylesheet hosted by Google in order to be able to use the font?

Answer 1

No need for Google. Open Sans is.. well, open… You can host the fonts yourself:

http://www.fontsquirrel.com/fonts/open-sans

If you want to be really fancy you can use Bourbon's font-face mixin:

http://bourbon.io/docs/#font-face

There's an excellent case to be made for letting Google (or Typekit, etc.) do the heavy lifting, but I prefer to control my own destiny and tend to favor self-hosting when possible. :)

Answer 2

Use the @import option:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

Or the JavaScript Option:

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Open+Sans::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>