beapi-frontend-framework/src/scss/03-base/_fonts.scss at d450a9f1745d1e40c921adc7e03ddc1d996361cf · BeAPI/beapi-frontend-framework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/**
 * Fontsource
 *
 * Fonts list : https://fontsource.org/
 * Documentation : https://fontsource.org/docs/getting-started/faces-mixin
 *
 * Examples :
 *
 *      1 - Install the font by the command :
 *          // For Classic font
 *          yarn add @fontsource/myFont
 *
 *          // For Variable font
 *          yarn add @fontsource-variable/myFont
 *
 *      2 - Declare font-face :
 *          // For Classic font
 *          @use "~@fontsource/myFont/scss/mixins" as MyFont;
 *          @include MyFont.faces($weights: (400, 700));
 *          ...
 *
 *          // For Variable font
 *          @use "~@fontsource-variable/myFont/scss/mixins" as MyFont;
 *          @include MyFont.faces($axes: all);
 *          ...
 */

@use "../../../node_modules/@fontsource/poppins/scss/mixins" as Poppins;

@include Poppins.faces($weights: (300, 400, 500, 700), $styles: normal);
@include Poppins.faces($weights: (300, 400, 500, 700), $styles: italic);

/**
 * Custom font here
 *
 * Examples :
 *
 *      // For Classic font
 *      @include declare-font-face("My classic font", "../fonts/gmy-classic-font-regular", 400);
 *      @include declare-font-face("My classic font", "../fonts/gmy-classic-font-regular-italic", 400, italic);
 *      @include declare-font-face("My classic font", "../fonts/gmy-classic-font-bold", 700);
 *      ...
 *
 *      // For Variable font
 *      @include declare-font-face("My variable font", "../fonts/my-variable-font", 100 950, normal, normal, "woff2-variations");
 *      ...
 *
 */