assets/sass/bourbon/bourbon/library/_font-face.scss

   1 @charset "UTF-8";
   2
   3 /// Generates an `@font-face` declaration. You can choose the specific file
   4 /// formats you need to output; the mixin supports `woff2`
   5 /// and `woff`. The mixin also supports usage with the Rails Asset Pipeline,
   6 /// which you can enable per use, or globally in the `$bourbon()` settings.
   7 ///
   8 /// @argument {string} $font-family
   9 ///
  10 /// @argument {string} $file-path
  11 ///
  12 /// @argument {string | list} $file-formats [("woff2", "woff")]
  13 ///   List of the font file formats to include. Can also be set globally using
  14 ///   the `global-font-file-formats` key in the Bourbon settings.
  15 ///
  16 /// @argument {boolean} $asset-pipeline [false]
  17 ///   Set to `true` if you’re using the Rails Asset Pipeline (place the fonts
  18 ///   in `app/assets/fonts/`). Can also be set globally using the
  19 ///   `rails-asset-pipeline` key in the Bourbon settings.
  20 ///
  21 /// @content
  22 ///   Any additional CSS properties that are included in the `@include`
  23 ///   directive will be output within the `@font-face` declaration, e.g. you can
  24 ///   pass in `font-weight`, `font-style` and/or `unicode-range`.
  25 ///
  26 /// @example scss
  27 ///   @include font-face(
  28 ///     "source-sans-pro",
  29 ///     "fonts/source-sans-pro-regular",
  30 ///     ("woff2", "woff")
  31 ///   ) {
  32 ///     font-style: normal;
  33 ///     font-weight: 400;
  34 ///   }
  35 ///
  36 ///   // CSS Output
  37 ///   @font-face {
  38 ///     font-family: "source-sans-pro";
  39 ///     src: url("fonts/source-sans-pro-regular.woff2") format("woff2"),
  40 ///          url("fonts/source-sans-pro-regular.woff") format("woff");
  41 ///     font-style: normal;
  42 ///     font-weight: 400;
  43 ///   }
  44 ///
  45 /// @require {function} _font-source-declaration
  46 ///
  47 /// @require {function} _fetch-bourbon-setting
  48
  49 @mixin font-face(
  50   $font-family,
  51   $file-path,
  52   $file-formats: _fetch-bourbon-setting("global-font-file-formats"),
  53   $asset-pipeline: _fetch-bourbon-setting("rails-asset-pipeline")
  54 ) {
  55   @font-face {
  56     font-family: $font-family;
  57     src: _font-source-declaration(
  58       $font-family,
  59       $file-path,
  60       $asset-pipeline,
  61       $file-formats
  62     );
  63     @content;
  64   }
  65 }