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

css sass compass-sass google-font-api
Doug Smith picture Doug Smith · Jul 17, 2013 · Viewed 12.2k times · Source

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

steveax picture steveax · Jul 17, 2013

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>

Related questions

SASS :not selector

I have a :not css selector in SASS mixin but it doesn't do anything: Code Snippet: @mixin dropdown-pos($pos:right) { &:not(.notip) { @if $comp-tip == true{ @if $pos == right { top:$dropdown-width * -0.6; @include tip($pos:$pos); } } } &.notip { @if $pos == …

Read More
Sass Background Image mixin

I'm kind of new to Sass, but I'm attempting to create a workflow for myself. I generate "color packs" for my theme designs and need to specify the following variables for my mixin. Is there a better way to do …

Read More
Sass/Compass - Convert Hex, RGB, or Named Color to RGBA

This may be Compass 101, but has anyone written a mixin which sets the alpha value of a color? Ideally, I would like the mixin to take any form of color definition, and apply transparency: @include set-alpha( red, 0.5 ); //prints rgba(255, 0, 0, 0.5); @include …

Read More