beapi-frontend-framework/src/scss/03-base/_fonts.scss at 25af7fa472c2c78cfb639289d2b64bcedfd1f536 · 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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/**
 * Fontsource
 *
 * Fonts list : https://fontsource.org/
 * Documentation : https://fontsource.org/docs/getting-started/faces-mixin
 *
 * Examples :
 *
 *      1 - Install the font and the utilities by the command :
 *          yarn add @fontsource-utils/scss
 *
 *          // For Classic font
 *          yarn add @fontsource/myFont
 *
 *          // For Variable font
 *          yarn add @fontsource-variable/myFont
 *
 *      2 - Declare font-face :
 *          // For Classic font
 *          @use "../../../node_modules/@fontsource-utils/scss/src/mixins" as fontsource;
 *          @use "../../../node_modules/@fontsource/myFont/scss/mixins" as MyFont;
 *          @include fontsource.faces($metadata: MyFont.$metadata, $weights: (400, 700));
 *          ...
 *
 *          // For Variable font
 *          @use "../../../node_modules/@fontsource-utils/scss/src/mixins" as fontsource;
 *          @use "../../../node_modules/@fontsource-variable/myFont/scss/mixins" as MyFont;
 *          @include fontsource.faces($metadata: MyFont.$metadata, $axes: wght);
 *          ...
 */

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

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

// Fallbacks for DM Sans  to improve cls
// https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback/?font=Poppins
@font-face {
	font-family: Poppins-fallback;
	src: local("Arial");
	size-adjust: 112.5%;
	ascent-override: 109%;
}

/**
 * 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");
 *      ...
 *
 */