@mixin fontface($family, $faces, $dirpath: $font-path) {
  @each $face in $faces {
    $filename: map-get($face, 'filename');
    $style: map-get($face, 'style');
    $weight: map-get($face, 'weight');
    @font-face {
      font-family: $family;
      src: url(#{$dirpath}/#{$filename}.eot);
      src: url(#{$dirpath}/#{$filename}.eot?#iefix) format('embedded-opentype'), url(#{$dirpath}/#{$filename}.woff2) format('woff2'), url(#{$dirpath}/#{$filename}.woff) format('woff'), url(#{$dirpath}/#{$filename}.ttf) format('truetype');
      font-style: $style;
      font-weight: map-get($font-weight, $weight);
    }
  }
}

@mixin webfonts($fonts) {
  @each $name, $faces in $fonts {
	  @include fontface(
      $family: $name,
      $faces: $faces
    );
  }
}

@mixin iconfont($font) {
  $family: map-get($font, 'family');
  @include fontface(
    $family: $family,
    $faces: map-get($font, 'faces')
  );

  .icon:before {
  	font-family: $family;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
  	font-style: normal;
  	font-variant: normal;
  	font-weight: normal;
  	text-decoration: none;
  	text-transform: none;
  }
}


@mixin font-size($size) {
  font-size: $size;
  font-size: convert-unit($size, 'base');
}


@mixin font-size-tablet($size) {
  font-size: $size;
  font-size: convert-unit($size, 'tablet');
}

@mixin font-size-mobile($size) {
  font-size: $size;
  font-size: convert-unit($size, 'mobile');
}