Trying to include only one font with multiple weights breaks

[mdavis1982]

Hi...

Trying to add just one font with multiple variants doesn't include all variants. For example:

@include web-font(Ubuntu, (400 700));

This only includes the 400 weight. Doing this makes it recognise both weights:

@include web-font(Ubuntu, (400 700,1));

Thanks

[jwwisman]

@mdavis1982 OK I tried the proper mark up but for some reason not only the comments are made into blocks...So sorry for the mark-up issues. but all on the next line can be copied and should work properly. Cheers.

/*
 * This is a fairly big mixin.
 * The reason for this is that at the time of writing (09/01/2013),
 * Sass does not include functions for substring or find/replace in string.
 * Chris Eppstein sent a Pull Request to Sass with the str-extract (substring) function back in June,
 * but it still has not been merged, due to lack of minor comments.
 * That was five months ago.
 */

@mixin web-font($fonts, $variants: (), $subsets: (), $text: '', $effects: ()) {
  $url: "//fonts.googleapis.com/css?family=";
  $i: 0;

 // Add the family argument to the URL string.
 // We can assume that the user will always specify at least one font.
  @each $font in $fonts {
    $i: $i + 1;

    // Add the name of the font.
    $j: 0;
    @each $word in $font {
      $j: $j + 1;
      $url: $url + $word;

      // Add a plus symbol between words.
      @if $j < length($font) {
        $url: $url + "+";
      }
    }

    // [ADDED] get the possible variants list for each $font.
    $totalVariants: nth($variants, $i);

    // [UPDATED] If there is/are font variant(s) for this font, add them.
    @if (length($totalVariants) > 0) {
      $url: $url + ':';
      $k: 0;
      // [UPDATED]
      @each $variant in $totalVariants {
        // @each $variant in $variants {
        $k: $k + 1;

        $url: $url + $variant;

        // Add a comma between variants.
        // For some reason length($variant) doesn't work. Weird!
        @if ($k < length(nth($variants, $i))) {
          $url: $url + ',';
        }
      }
    }

    // Add a pipe between words.
    // It would seem that a pipe isn't a valid URL character in its unescaped form,
    // but Google reccommend using it anyway.
    @if $i < length($fonts) {
      $url: $url + "|";
    }
  }

  // Add the subset argument to the URL string, if it exists.
  @if length($subsets) > 0 {
    $url: $url + "&subset=";
    $i: 0;
    @each $subset in $subsets {
      $i: $i + 1;
      $url: $url + $subset;

      // Add a comma between subsets.
      @if $i < length($subsets) {
        $url: $url + ',';
      }
    }
  }

  // Add the text argument to the URL string, if it exists.
  // $text does not actually need to be enclosed in brackets.
  @if length($text) > 0 and $text != '' {

    // To save the user the hassle of adding a space character every time they want
    // to use a web font, we add one automatically.
    $url: $url + "&text=%20#{$text}";
  }

  // Add the effect argument to the URL string, if it exists.
  @if length($effects) > 0 {
    $url: $url + "&effect=";
    $i: 0;
    @each $effect in $effects {
      $i: $i + 1;

      // Add the name of the font.
      $j: 0;
      @each $word in $effect {
        $j: $j + 1;
        $url: $url + $word;

        // Add a hyphen between words.
        // A hyphen can actually be used to seperate words instead of a space,
        // in which case the words will be counted as one and no extra hyphens will be added.
        // Again, a string replacement function would make this a lot easier…
        @if $j < length($effect) {
          $url: $url + "-";
        }
      }

      // Add a pipe between effects.
      @if $i < length($effects) {
        $url: $url + "|";
      }
    }
  }
  @debug #{$url};
  // Finally!
  @import url(#{$url});
}

[alyssais]

Thanks @jwwisman! Seems GitHub don't notify me of issues on my own repos, so I didn't actually see this until just now. I'll carry out some more tests with your code and try to get it merged.

[aaronmallen]

I tired using the code given by jwwisman and it still doesn't render more than one variable so:

@include web-font (("Open+Sans"),(400italic,600italic,400,600,700,800))

renders as:

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

in the CSS

In conelisonc .sass version

@include web-font (("Open+Sans"),(400italic, 600italic, 400, 600, 700, 800))

renders as:

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

A work around for this bug (however not preferred) is to use individual includes:

@include web-font (("Open+Sans"),(400italic))
@include web-font (("Open+Sans"),(600italic))
@include web-font (("Open+Sans"),(400))
@include web-font (("Open+Sans"),(600))
@include web-font (("Open+Sans"),(700))
@include web-font (("Open+Sans"),(800))

Which render as:

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

Or the above mentioned:

@include web-font (("Open+Sans"),(400italic 600italic 400 600 700 800, 1))

you can replace the ,1 with any number as it wont render

[alyssais]

Hi! I just finished rewriting the mixin for Sass 3.3, and it should now support multiple weights properly. Please let me know how it goes. :)