1  @font-face {
 2    font-family: 'Lato';
 3    src: url('../assets/fonts/Lato-Light.woff2') format('woff2'),
 4      url('../assets/fonts/Lato-Light.woff') format('woff');
 5    font-style: normal;
 6    font-weight: 300;
 7  }
 8  
 9  @font-face {
10    font-family: 'Lato';
11    src: url('../assets/fonts/Lato-Regular.woff2') format('woff2'),
12      url('../assets/fonts/Lato-Regular.woff') format('woff');
13    font-style: normal;
14    font-weight: 400;
15  }
16  
17  @font-face {
18    font-family: 'Lato';
19    src: url('../assets/fonts/Lato-Bold.woff2') format('woff2'),
20      url('../assets/fonts/Lato-Bold.woff') format('woff');
21    font-style: normal;
22    font-weight: 700;
23  }
24  
25  @font-face {
26    font-family: 'Roboto Mono';
27    font-style: normal;
28    font-weight: 300;
29    src: url('../assets/fonts/Roboto-Mono-Light.woff2') format('woff2'),
30      url('../assets/fonts/Roboto-Mono-Light.woff') format('woff');
31  }
32  @font-face {
33    font-family: 'Roboto Mono';
34    font-style: normal;
35    font-weight: 400;
36    src: url('../assets/fonts/Roboto-Mono-Regular.woff2') format('woff2'),
37      url('../assets/fonts/Roboto-Mono-Regular.woff') format('woff');
38  }
39  
40  @font-face {
41    font-family: 'social-media';
42    src: url('../assets/fonts/social-media.woff2') format('woff2'),
43      url('../assets/fonts/social-media.woff') format('woff');
44    font-weight: normal;
45    font-style: normal;
46  }
47  .sm-icon {
48    display: inline-block;
49    font: normal normal normal 32px/1 'social-media';
50    text-transform: none;
51    /* Better Font Rendering */
52    -webkit-font-smoothing: antialiased;
53    -moz-osx-font-smoothing: grayscale;
54  
55    &.sm-16px {
56      font-size: 16px;
57    }
58    &.sm-24px {
59      font-size: 24px;
60    }
61    &.sm-32px {
62      font-size: 32px;
63    }
64    &.sm-48px {
65      font-size: 48px;
66    }
67    // Refer to docs for updating icon-fonts
68    &.sm-logo-medium:before {
69      content: '\ea02';
70    }
71    &.sm-logo-discord:before {
72      content: '\ea03';
73    }
74    &.sm-logo-linkedin:before {
75      content: '\ea04';
76    }
77    &.sm-logo-reddit:before {
78      content: '\ea05';
79    }
80    &.sm-logo-facebook:before {
81      content: '\ea06';
82    }
83    &.sm-logo-twitter:before {
84      content: '\ea07';
85    }
86    &.sm-logo-github:before {
87      content: '\ea08';
88    }
89  }