Skip to content

Commit 3f569c5

Browse files
mariannuarmariannuar
authored
Merge pull request #177 from emulsify-ds/EMULSIF-544
EMULSIF-544: Make fonts load
2 parents 3866f07 + 032bdd0 commit 3f569c5

1 file changed

Lines changed: 154 additions & 9 deletions

File tree

‎src/foundation/typography/_fonts.scss‎

Lines changed: 154 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,154 @@
1-
// $font-url: '../../assets/fonts';
2-
3-
// @font-face {
4-
// font-family: [font-family];
5-
// src: url('#{$font-url}/[font-filename]') format('truetype');
6-
// font-weight: 500;
7-
// font-style: normal;
8-
// font-display: swap;
9-
// }
1+
$font-url: '../../assets/fonts';
2+
3+
/* Inter */
4+
5+
@font-face {
6+
font-family: Inter;
7+
src: url('#{$font-url}/inter/Inter-Black.ttf') format('truetype');
8+
font-weight: 900;
9+
font-style: normal;
10+
font-display: swap;
11+
}
12+
13+
@font-face {
14+
font-family: Inter;
15+
src: url('#{$font-url}/inter/Inter-Bold.ttf') format('truetype');
16+
font-weight: 700;
17+
font-style: normal;
18+
font-display: swap;
19+
}
20+
21+
@font-face {
22+
font-family: Inter;
23+
src: url('#{$font-url}/inter/Inter-ExtraBold.ttf') format('truetype');
24+
font-weight: 800;
25+
font-style: normal;
26+
font-display: swap;
27+
}
28+
29+
@font-face {
30+
font-family: Inter;
31+
src: url('#{$font-url}/inter/Inter-ExtraLight.ttf') format('truetype');
32+
font-weight: 200;
33+
font-style: normal;
34+
font-display: swap;
35+
}
36+
37+
@font-face {
38+
font-family: Inter;
39+
src: url('#{$font-url}/inter/Inter-Light.ttf') format('truetype');
40+
font-weight: 300;
41+
font-style: normal;
42+
font-display: swap;
43+
}
44+
45+
@font-face {
46+
font-family: Inter;
47+
src: url('#{$font-url}/inter/Inter-Medium.ttf') format('truetype');
48+
font-weight: 500;
49+
font-style: normal;
50+
font-display: swap;
51+
}
52+
53+
@font-face {
54+
font-family: Inter;
55+
src: url('#{$font-url}/inter/Inter-Regular.ttf') format('truetype');
56+
font-weight: 400;
57+
font-style: normal;
58+
font-display: swap;
59+
}
60+
61+
@font-face {
62+
font-family: Inter;
63+
src: url('#{$font-url}/inter/Inter-SemiBold.ttf') format('truetype');
64+
font-weight: 600;
65+
font-style: normal;
66+
font-display: swap;
67+
}
68+
69+
@font-face {
70+
font-family: Inter;
71+
src: url('#{$font-url}/inter/Inter-Thin.ttf') format('truetype');
72+
font-weight: 100;
73+
font-style: normal;
74+
font-display: swap;
75+
}
76+
77+
/* Sentinel */
78+
79+
@font-face {
80+
font-family: Sentinel;
81+
src:
82+
url('#{$font-url}/sentinel/Sentinel-Black.ttf') format('truetype'),
83+
url('#{$font-url}/sentinel/Sentinel-Black.woff') format('woff'),
84+
url('#{$font-url}/sentinel/Sentinel-Black.woff2') format('woff2');
85+
font-weight: 900;
86+
font-style: normal;
87+
font-display: swap;
88+
}
89+
90+
@font-face {
91+
font-family: Sentinel;
92+
src:
93+
url('#{$font-url}/sentinel/Sentinel-Bold.woff') format('truetype'),
94+
url('#{$font-url}/sentinel/Sentinel-Bold.woff') format('woff'),
95+
url('#{$font-url}/sentinel/Sentinel-Bold.woff2') format('woff2');
96+
font-weight: 700;
97+
font-style: normal;
98+
font-display: swap;
99+
}
100+
101+
@font-face {
102+
font-family: Sentinel;
103+
src:
104+
url('#{$font-url}/sentinel/Sentinel-Light.woff') format('truetype'),
105+
url('#{$font-url}/sentinel/Sentinel-Light.woff') format('woff'),
106+
url('#{$font-url}/sentinel/Sentinel-Light.woff2') format('woff2');
107+
font-weight: 300;
108+
font-style: normal;
109+
font-display: swap;
110+
}
111+
112+
@font-face {
113+
font-family: Sentinel;
114+
src:
115+
url('#{$font-url}/sentinel/Sentinel-LightItalic.woff') format('truetype'),
116+
url('#{$font-url}/sentinel/Sentinel-LightItalic.woff') format('woff'),
117+
url('#{$font-url}/sentinel/Sentinel-LightItalic.woff2') format('woff2');
118+
font-weight: 300;
119+
font-style: italic;
120+
font-display: swap;
121+
}
122+
123+
@font-face {
124+
font-family: Sentinel;
125+
src:
126+
url('#{$font-url}/sentinel/Sentinel-Medium.woff') format('truetype'),
127+
url('#{$font-url}/sentinel/Sentinel-Medium.woff') format('woff'),
128+
url('#{$font-url}/sentinel/Sentinel-Medium.woff2') format('woff2');
129+
font-weight: 500;
130+
font-style: normal;
131+
font-display: swap;
132+
}
133+
134+
@font-face {
135+
font-family: Sentinel;
136+
src:
137+
url('#{$font-url}/sentinel/Sentinel-MediumItalic.woff') format('truetype'),
138+
url('#{$font-url}/sentinel/Sentinel-MediumItalic.woff') format('woff'),
139+
url('#{$font-url}/sentinel/Sentinel-MediumItalic.woff2') format('woff2');
140+
font-weight: 500;
141+
font-style: italic;
142+
font-display: swap;
143+
}
144+
145+
@font-face {
146+
font-family: Sentinel;
147+
src:
148+
url('#{$font-url}/sentinel/Sentinel-Semibold.woff') format('truetype'),
149+
url('#{$font-url}/sentinel/Sentinel-Semibold.woff') format('woff'),
150+
url('#{$font-url}/sentinel/Sentinel-Semibold.woff2') format('woff2');
151+
font-weight: 600;
152+
font-style: italic;
153+
font-display: swap;
154+
}

0 commit comments

Comments
 (0)