2d3ca553 |
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 | } |